:root{--bg: #14110f;--card: #1f1b18;--card2: #2a241f;--line: #3a332d;--text: #f3ece4;--dim: #a89a8c;--accent: #e8a25a;--accent2: #f2c38b;--good: #7fc29b;--bad: #e07a6a;--help: #22324a;font-family:Noto Sans Thai,Sarabun,Thonburi,Leelawadee UI,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}body{min-height:100dvh}#app{max-width:520px;margin:0 auto;padding:16px 16px 112px}h1{font-size:30px;line-height:1.3;margin:28px 0 8px;color:var(--accent);letter-spacing:.2px}.dim{color:var(--dim);font-size:14px;line-height:1.65}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0}.card.hero{background:linear-gradient(160deg,#2b2119,#1c1714);border-color:#4a3a2c}.warn{border-color:#6b3d33;background:#21171493}label{display:block;font-size:14px;color:var(--dim);margin:14px 0 6px}select,button{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px}select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}button{cursor:pointer;transition:transform .08s ease,border-color .15s}button:active{transform:scale(.97)}button:disabled{opacity:.6;cursor:default}button.primary{width:100%;background:var(--accent);color:#1b130b;border:0;font-weight:700;padding:15px;margin-top:18px;font-size:17px}.row{display:flex;gap:8px;flex-wrap:wrap}.row>button{flex:1;min-width:0}button.on{border-color:var(--accent);color:var(--accent);background:#2b2119}.bars{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.bar{font-size:12px;color:var(--dim)}.bar i{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:4px;overflow:hidden}.bar i b{display:block;height:100%;background:var(--accent);transition:width .4s ease}.others{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}.other{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 6px;font-size:11px;line-height:1.45;overflow-wrap:anywhere}.other b{font-size:12px;color:var(--accent2)}.other.gone{opacity:.45}.timeline{font-size:15px;line-height:1.75}.timeline p{margin:7px 0;animation:rise .35s ease both}.timeline p.major{color:var(--text);font-weight:600}.timeline p:not(.major){color:var(--dim)}.timeline .age{display:inline-block;min-width:52px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.help{background:var(--help);border:1px solid #36507a;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.75;margin:10px 0}.help a{color:#9cc7ff}.controls{position:fixed;left:0;right:0;bottom:0;background:#14110ff0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.controls .row{max-width:520px;margin:0 auto}.choice{border-color:var(--accent);background:#2b2119;animation:rise .3s ease both}.choice p{margin:0 0 12px;font-size:16px;line-height:1.6}table{width:100%;border-collapse:collapse;font-size:14px}td{padding:7px 4px;border-bottom:1px solid var(--line)}td.num{text-align:right;font-variant-numeric:tabular-nums}a{color:var(--accent)}.big{font-size:18px;line-height:1.75;margin:0}.tag{display:inline-block;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin:0 6px 6px 0}.clickable{cursor:pointer}.sticky{position:sticky;top:0;z-index:2;background:var(--bg);padding-top:4px;margin-top:-4px}.sticky .card{margin-top:8px}.col{display:flex;flex-direction:column;gap:8px}.col>button{width:100%;text-align:left;padding:13px 14px}.end-spacer{height:1px;scroll-margin-bottom:96px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.card.head{padding:10px 14px;margin:8px 0 6px}.card.head .bars{grid-template-columns:repeat(4,1fr);gap:4px 8px;margin-top:6px}.card.head .bar{font-size:11px}.card.head .bar i{height:5px;margin-top:3px}.others .other{padding:5px 6px;font-size:10.5px;line-height:1.35;max-height:58px;overflow:hidden}.others .other b{font-size:11.5px}.others .cty{color:var(--dim);font-size:10px}.others{margin:6px 0 8px}@media (prefers-reduced-motion: reduce){.timeline p,.choice{animation:none}.bar i b,button{transition:none}}