@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--black:#000;--card:#0d0d0d;--card-hover:#141414;--amber:#f59e0b;--amber-soft:#fbbf24;--amber-glow:#f59e0b0f;--white:#fafafa;--gray:#737373;--gray-dim:#404040;--gray-faint:#1a1a1a;--radius:16px}html{scroll-behavior:smooth}body{background:var(--black);color:var(--gray);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Noto Sans Thai,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}.page{max-width:1200px;margin:0 auto;padding:80px 40px 120px}.hero{margin-bottom:100px}.hero-label{letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:20px;font-family:DM Mono,monospace;font-size:12px;font-weight:500}.hero-title{color:var(--white);letter-spacing:-3px;margin-bottom:24px;font-size:clamp(52px,8vw,96px);font-weight:900;line-height:.95}.hero-count{color:var(--amber)}.hero-desc{color:var(--gray);max-width:480px;font-size:18px;line-height:1.7}.stats{gap:64px;margin-bottom:100px;display:flex}.stat-num{color:var(--white);font-family:DM Mono,monospace;font-size:48px;font-weight:500;line-height:1}.stat-label{letter-spacing:.12em;text-transform:uppercase;color:var(--gray-dim);margin-top:8px;font-family:DM Mono,monospace;font-size:12px}.timeline{background:var(--card);border-radius:var(--radius);margin-bottom:100px;padding:40px}.timeline-head{justify-content:space-between;align-items:baseline;margin-bottom:32px;display:flex}.timeline-title{color:var(--white);letter-spacing:-.5px;font-size:28px;font-weight:800}.timeline-range{color:var(--gray-dim);letter-spacing:.1em;font-family:DM Mono,monospace;font-size:12px}.timeline-months{justify-content:space-between;margin-bottom:12px;padding:0 2px;display:flex}.timeline-month-label{color:var(--gray-dim);letter-spacing:.05em;font-family:DM Mono,monospace;font-size:11px}.timeline-bars{align-items:flex-end;gap:3px;height:120px;display:flex}.timeline-bar-wrap{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:100%;display:flex;position:relative}.timeline-bar{background:var(--amber);opacity:.7;border-radius:4px 4px 0 0;width:100%;max-width:28px;min-height:4px;transition:opacity .2s}.timeline-bar-wrap:hover .timeline-bar{opacity:1}.timeline-bar-num{color:var(--amber-soft);margin-bottom:4px;font-family:DM Mono,monospace;font-size:9px;font-weight:500}.category{margin-bottom:80px}.category-head{align-items:baseline;gap:16px;margin-bottom:32px;display:flex}.category-title{color:var(--white);letter-spacing:-.5px;font-size:28px;font-weight:800}.category-num{color:var(--gray-dim);font-family:DM Mono,monospace;font-size:14px}.oracle-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.oracle-card{background:var(--card);border-radius:var(--radius);cursor:pointer;text-align:left;min-height:140px;color:inherit;border:none;flex-direction:column;gap:16px;width:100%;padding:28px;font-family:inherit;transition:background .25s,transform .25s;display:flex;position:relative}.oracle-card:hover{background:var(--card-hover);transform:translateY(-4px)}.oracle-card:focus-visible{outline:2px solid var(--amber);outline-offset:4px}.oracle-card-top{align-items:center;gap:16px;display:flex}.oracle-card-emoji{background:var(--gray-faint);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:32px;display:flex}.oracle-card-name{color:var(--white);font-size:18px;font-weight:700;line-height:1.2}.oracle-card-id{color:var(--gray-dim);margin-top:2px;font-family:DM Mono,monospace;font-size:12px}.oracle-card-focus{color:var(--gray);font-size:14px;line-height:1.6}.oracle-card-born{color:var(--gray-dim);margin-top:auto;font-family:DM Mono,monospace;font-size:11px}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#000000d9;justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;inset:0}.modal-box{background:var(--card);border-radius:24px;width:100%;max-width:520px;padding:48px;position:relative}.modal-close{background:var(--gray-faint);color:var(--gray);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;transition:background .2s,color .2s;display:flex;position:absolute;top:20px;right:20px}.modal-close:hover{background:var(--card-hover);color:var(--white)}.modal-close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.modal-emoji{margin-bottom:24px;font-size:56px}.modal-name{color:var(--white);letter-spacing:-.5px;margin-bottom:4px;font-size:32px;font-weight:800}.modal-category{letter-spacing:.1em;text-transform:uppercase;margin-bottom:32px;font-family:DM Mono,monospace;font-size:12px}.modal-info{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px;display:grid}.modal-info-item{background:var(--gray-faint);border-radius:12px;padding:16px}.modal-info-label{letter-spacing:.15em;text-transform:uppercase;color:var(--gray-dim);margin-bottom:4px;font-family:DM Mono,monospace;font-size:10px}.modal-info-value{color:var(--white);font-size:18px;font-weight:700}.modal-purpose{color:var(--gray);font-size:16px;line-height:1.75}.footer{border-top:1px solid var(--gray-faint);margin-top:120px;padding-top:40px}.footer-text{color:var(--gray-dim);letter-spacing:.05em;margin-bottom:8px;font-family:DM Mono,monospace;font-size:12px}.footer-text strong{color:var(--amber)}.footer-quote{color:var(--gray);font-size:20px;font-weight:600}@media (width<=768px){.page{padding:48px 20px 80px}.hero{margin-bottom:64px}.hero-title{letter-spacing:-1.5px}.stats{flex-wrap:wrap;gap:32px;margin-bottom:64px}.stat-num{font-size:36px}.category{margin-bottom:56px}.category-title{font-size:22px}.oracle-grid{grid-template-columns:1fr}.oracle-card{padding:24px}.modal-box{padding:32px}.modal-name{font-size:26px}.footer{margin-top:80px}}@media (width<=480px){.stats{flex-direction:column;gap:24px}.oracle-grid{gap:12px}}
