:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;--blue: #0038a8;--red: #ce1126;--gold: #fcd116;--surface: #111;--surface-2: #1a1a1a;--border: rgba(255, 255, 255, .08);--text: #f0f0f0;--text-dim: rgba(255, 255, 255, .55);--text-muted: rgba(255, 255, 255, .35);--radius: 12px}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--surface);color:var(--text)}.app{max-width:900px;margin:0 auto;padding:0 1.25rem 4rem}.header{text-align:center;padding:3rem 0 1.5rem}.header-flag{display:inline-flex;overflow:hidden;border-radius:6px;width:80px;height:48px;position:relative;margin-bottom:1.25rem;box-shadow:0 2px 12px #00000080}.flag-stripe{flex:1}.flag-blue{background:var(--blue)}.flag-red{background:var(--red)}.flag-sun{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:var(--gold);text-shadow:0 0 6px rgba(252,209,22,.6)}.header-title{font-size:2rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--gold),#fff8dc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-sub{color:var(--text-dim);font-size:.95rem;margin-top:.35rem}.tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}.tab{padding:.6rem 1.5rem;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-dim);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.tab:hover{border-color:#fff3;color:var(--text)}.tab-active{background:var(--gold);color:#111;border-color:var(--gold);font-weight:600}.tab-active:hover{color:#111}.timeline{display:flex;flex-direction:column;gap:0}.timeline-item{display:flex;gap:1.25rem}.timeline-connector{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:20px}.timeline-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px #ffffff1a}.timeline-line{width:2px;flex:1;background:var(--border);min-height:24px}.timeline-body{padding-bottom:2rem;flex:1}.timeline-year{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;font-weight:600;color:var(--gold);letter-spacing:.03em}.timeline-cat{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-left:.75rem;font-weight:600}.timeline-title{font-size:1.15rem;font-weight:600;margin-top:.3rem;color:#fff}.timeline-desc{margin-top:.4rem;color:var(--text-dim);font-size:.9rem;line-height:1.65}.heroes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.hero-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);cursor:pointer;transition:all .2s;font-family:inherit;color:inherit}.hero-card:hover{border-color:var(--gold);background:#fcd1160a;transform:translateY(-2px)}.hero-emoji{font-size:2.5rem;margin-bottom:.75rem}.hero-name{font-size:1.1rem;font-weight:600;color:#fff}.hero-title-text{font-size:.8rem;color:var(--gold);font-weight:500;margin-top:.2rem}.hero-lifespan{font-size:.75rem;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:.35rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;padding:1rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);max-width:560px;width:100%;max-height:85vh;overflow-y:auto;padding:2rem;position:relative;animation:slideUp .25s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:1px solid var(--border);color:var(--text-dim);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.85rem;display:grid;place-items:center;transition:all .15s}.modal-close:hover{color:#fff;border-color:#ffffff4d}.modal-hero-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.modal-emoji{font-size:3rem}.modal-name{font-size:1.35rem;font-weight:700;color:#fff}.modal-title{display:block;font-size:.85rem;color:var(--gold);font-weight:500}.modal-lifespan{display:block;font-size:.75rem;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.modal-section{margin-top:1.25rem}.modal-section h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:.5rem;font-weight:600}.modal-section p{color:var(--text-dim);font-size:.9rem;line-height:1.7}.places-grid{display:flex;flex-direction:column;gap:1rem}.place-card{display:flex;gap:1.25rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);transition:border-color .2s}.place-card:hover{border-color:#ffffff26}.place-emoji{font-size:2.25rem;flex-shrink:0}.place-info{flex:1}.place-name{font-size:1.1rem;font-weight:600;color:#fff}.place-location{display:inline-block;font-size:.75rem;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:.5rem}.place-desc{color:var(--text-dim);font-size:.9rem;line-height:1.6}.place-sig{margin-top:.65rem;font-size:.85rem;color:var(--text-dim);line-height:1.6}.place-sig strong{color:var(--gold)}@media(max-width:600px){.header-title{font-size:1.5rem}.heroes-grid{grid-template-columns:1fr 1fr}.modal{padding:1.5rem}.place-card{flex-direction:column;gap:.75rem}}