:root{--bg: #0a0a0c;--bg-panel: #121214;--bg-panel-2: #18181b;--border: #2a2a2e;--border-bright: #3a3a40;--accent: #ff5a1f;--accent-dim: #cc4818;--accent-light: #ffb27a;--white: #f5f5f2;--text-dim: #9c9ca3;--text-faint: #8a8a91;--up: #4caf6d;--down: #e0574a;--clay: #c9764a;--purple: #9b6bde;--blue: #4a90d9;--font-display: "Anton", sans-serif;--font-mono: "JetBrains Mono", monospace;--font-body: "Inter", sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font-body)}.app{max-width:980px;margin:0 auto;padding:2.5rem 1.5rem 4rem}.wordmark{font-family:var(--font-display);font-size:2rem;letter-spacing:.01em;color:var(--white);margin:0}.site-nav{display:flex;flex-direction:column;gap:.75rem;border-bottom:1px solid var(--border);padding:1.1rem 0;margin-bottom:1.5rem}.site-nav-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.site-nav-bottom{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.site-nav-disclaimers{display:flex;justify-content:flex-start;margin-top:-.4rem}.nav-logo{background:none;border:none;cursor:pointer;font-family:var(--font-display);font-size:2.1rem;letter-spacing:.01em;color:var(--white);padding:0}.wordmark-mark{display:inline-flex;align-items:center;gap:.4em}.wordmark-icon{width:2.2em;height:2.2em;border-radius:.22em;flex-shrink:0}.wordmark-era{color:var(--accent)}.wordmark-text{position:relative;display:inline-block;text-transform:uppercase;font-style:italic;transform:skew(-10deg);letter-spacing:-.02em;padding-bottom:.14em}.wordmark-text:after{content:"";position:absolute;left:0;right:.1em;bottom:0;height:.09em;background:var(--accent);border-radius:1px}.wordmark-swoosh{position:absolute;top:-.5em;right:-.7em;width:.75em;height:.75em;color:var(--accent)}.nav-links{display:flex;gap:1.6rem;flex-wrap:wrap}.nav-link{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:.9rem;color:var(--text-dim);padding:.4rem 0}.nav-link:hover{color:var(--white)}.nav-disclaimers-link{background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);padding:.4rem 0}.nav-disclaimers-link:hover{color:var(--text-dim)}.nav-link.active{color:var(--white);border-bottom:2px solid var(--accent)}.nav-cta{background:var(--accent);border:none;color:#14100c;font-family:var(--font-body);font-weight:700;font-size:.85rem;padding:.65rem 1.3rem;border-radius:6px;cursor:pointer;white-space:nowrap}.nav-cta:hover{background:#ff7440}.era-banner{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:.9rem 1.1rem;margin:1.25rem 0 1.5rem;font-family:var(--font-mono);font-size:.85rem;color:var(--text-dim)}.era-banner strong{color:var(--accent)}.era-inline-select{background:transparent;border:none;border-bottom:1px dashed var(--accent);color:var(--accent);font-family:var(--font-mono);font-weight:700;font-size:inherit;padding:0 2px;cursor:pointer}.era-inline-select:hover,.era-inline-select:focus{outline:none;border-bottom-style:solid}.disclaimer-banner{background:#f2a93b14;border:1px solid var(--accent);border-radius:8px;padding:.9rem 1.1rem;margin:0 0 1.5rem;font-family:var(--font-body);font-size:.9rem;color:var(--white);line-height:1.5}.era-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem}.field-label{font-size:12px;color:var(--text-dim);display:block;margin-bottom:4px;font-family:var(--font-mono)}.era-tag{display:inline-block;margin-left:8px;padding:1px 6px;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.03em;border-radius:4px;vertical-align:middle;white-space:nowrap;border:1px solid currentColor}.era-tag-deadball{color:var(--clay)}.era-tag-integration{color:#4fa3d1}.era-tag-mound{color:#b083e0}.era-tag-negro-league{color:#e0c93a}.controls{display:flex;gap:12px;margin-bottom:1rem;flex-wrap:wrap}.search-input{background:var(--bg-panel);border:1px solid var(--border);color:var(--white);font-family:var(--font-body);font-size:.95rem;padding:.5rem .8rem;border-radius:6px;flex:1;min-width:200px}.search-input::placeholder{color:var(--text-dim)}.row-highlight{background:#f2a93b1a}.row-highlight:hover{background:#f2a93b29}.stat-board-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.stitch-divider{position:relative;height:12px;margin:.6rem 0 1.2rem;background-image:repeating-linear-gradient(115deg,var(--accent) 0px,var(--accent) 3px,transparent 3px,transparent 12px);background-repeat:repeat-x;background-size:auto 100%}.stitch-divider:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:var(--accent);opacity:.55}Three families,deliberately different from each other — not drift: - .page-btn: the shared utility base (font-mono,bordered,neutral). Size/spacing variants (.download-btn,.swap-btn,.show-more-btn) always pair WITH .page-btn in JSX rather than redefining its look — keep doing that for any new utility button instead of writing a one-off class. - .nav-cta (primary,filled) / .hero-cta-secondary (secondary,outlined): a matched pair,both font-body,both .85rem / .65rem 1.3rem padding / 6px radius. Keep these two in sync if either changes — they sit side by side in Home's hero-cta-row.
- .feature-cta: text-link style (no border/background),for inline "→" links inside cards/prose,not a boxed button. .back-to-top's pill radius (999px) is a deliberate floating-action-
button convention,not an inconsistency with the 6px used elsewhere. */ .download-btn{font-size:.7rem;padding:.35rem .75rem}.swap-btn{align-self:flex-end;margin-bottom:0;font-size:1rem;padding:.5rem .7rem}.table-wrapper{overflow-x:auto;position:relative}.table-wrapper.scrollable{max-height:520px;overflow-y:auto}.table-wrapper.scrollable thead th{position:sticky;top:0;background:var(--bg);z-index:2}table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.85rem}thead th{text-align:right;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;padding:.5rem .6rem;border-bottom:2px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none}thead th:first-child,thead th:nth-child(2),thead th:nth-child(3){text-align:left}thead th:hover,thead th.active{color:var(--accent)}tbody td{padding:.55rem .6rem;text-align:right;border-bottom:1px solid rgba(255,255,255,.06)}tbody td:first-child,tbody td:nth-child(2),tbody td:nth-child(3){text-align:left;font-family:var(--font-body)}tbody tr:hover{background:#1d9e7514;cursor:pointer}.rank{color:var(--accent);font-weight:600;width:2.5rem}.player-name{font-weight:600}.delta-up{color:var(--up)}.delta-down{color:var(--clay)}.footer-note{margin-top:1.5rem;font-family:var(--font-body);font-size:.85rem;color:var(--text-dim);line-height:1.6}.tab{background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:.5rem 1rem;border-radius:6px 6px 0 0;cursor:pointer;text-decoration:none;display:inline-block}.tab.active{background:var(--bg-panel);color:var(--accent);border-color:var(--accent);border-bottom-color:var(--bg-panel)}.era-presets .tab{border-radius:6px;border-color:var(--accent)}.era-presets .tab.active{background:#f2a93b14;color:var(--accent);border-color:var(--accent);font-weight:600}.jump-nav{display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:0;z-index:5;background:var(--bg);padding:.6rem 0;margin-bottom:.5rem;border-bottom:1px solid var(--border)}.jump-nav .tab{border-radius:6px;padding:.35rem .75rem;font-size:.68rem;border-color:var(--accent);color:var(--text-dim)}.jump-nav .tab:hover{color:var(--accent);background:#f2a93b14}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a0cd9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}.modal-box{background:var(--bg-panel);border:1px solid var(--accent);border-radius:12px;padding:1.5rem 1.75rem;max-width:460px;width:100%}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.25rem}.compare-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem}.compare-card-accent{border-color:var(--accent)}.compare-label{font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em}.stat-rows{display:flex;flex-direction:column;gap:6px}.stat-row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:1rem}.result-count{font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim);margin:0 0 .5rem}.page-btn{background:var(--bg-panel);border:1px solid var(--border);color:var(--white);font-family:var(--font-mono);font-size:.8rem;padding:.5rem 1rem;border-radius:6px;cursor:pointer}.page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.page-btn:disabled{opacity:.35;cursor:default}.stat-board{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);scroll-margin-top:4.5rem}.stat-board-title{font-family:var(--font-display);font-size:1.3rem;color:var(--accent);margin:0 0 .75rem;letter-spacing:.06em}.show-more-btn{display:block;margin:.75rem auto 0}.back-to-top{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--accent);color:var(--bg);border:none;font-family:var(--font-mono);font-size:.75rem;font-weight:600;padding:.6rem 1rem;border-radius:999px;cursor:pointer;box-shadow:0 2px 10px #0006;z-index:20}.back-to-top:hover{opacity:.85}.hero{padding:1.5rem 0 .5rem}.hero-eyebrow{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 .75rem}.hero-headline{font-family:var(--font-display);font-size:2rem;line-height:1.25;color:var(--white);margin:0 0 1rem;max-width:700px;letter-spacing:.06em}.hero-body{font-family:var(--font-body);font-size:1.05rem;line-height:1.65;color:var(--text-dim);max-width:680px;margin:0 0 1.5rem}.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:1.75rem}.hero-cta-secondary{background:transparent;border:1px solid var(--border-bright);color:var(--white);font-family:var(--font-body);font-weight:600;font-size:.85rem;padding:.65rem 1.3rem;border-radius:6px;cursor:pointer}.hero-cta-secondary:hover{border-color:var(--accent);color:var(--accent)}.hero-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:1.5rem}.hero-stat{display:flex;flex-direction:column}.hero-stat-num{font-family:var(--font-mono);font-size:1.6rem;font-weight:600;color:var(--accent)}.hero-stat-label{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}.timeline-intro{text-align:center;margin:2.5rem 0 1rem}.timeline-headline{font-family:var(--font-display);font-size:2.2rem;line-height:1.2;color:var(--white);margin:.6rem auto 0;max-width:560px;letter-spacing:.06em}.timeline-headline em{color:var(--accent);font-style:normal}.famous-card-divider{display:block;width:26px;height:2px;background:var(--accent);margin:0 0 .4rem}.famous-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;grid-auto-flow:dense;gap:12px;margin:1.5rem 0 1rem}.famous-card{position:relative;border:none;border-radius:12px;overflow:hidden;cursor:pointer;padding:0;background:var(--bg-panel)}.famous-card.size-lg{grid-column:span 2;grid-row:span 2}.famous-card.size-md{grid-column:span 2;grid-row:span 1}.famous-card.size-sm{grid-column:span 1;grid-row:span 1}.famous-card-img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;filter:grayscale(15%);transition:filter .25s ease,transform .25s ease}.famous-card-img.crop-tight{object-position:center 4%;transform:scale(1.15)}.famous-card:hover .famous-card-img.crop-tight{transform:scale(1.18)}.famous-card:hover .famous-card-img{filter:blur(4px) brightness(.5);transform:scale(1.03)}.famous-card-caption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);text-align:left;transition:opacity .2s ease}.famous-card-name{display:block;font-family:var(--font-body);font-weight:700;font-size:.9rem;color:var(--white)}.famous-card-year{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--accent)}.famous-card:hover .famous-card-caption{opacity:0}.famous-card-hover{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;opacity:0;transition:opacity .2s ease}.famous-card:hover .famous-card-hover{opacity:1}.famous-card-hover-text{font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--white);font-weight:600}.famous-card-hover-arrow{font-size:1.3rem;color:var(--accent)}.famous-credit{font-family:var(--font-body);font-size:.75rem;color:var(--text-faint);text-align:center;margin:0 0 1.5rem}.famous-credit a{color:var(--text-dim);text-decoration:underline}.famous-credit a:hover{color:var(--accent)}@media (max-width: 720px){.famous-grid{grid-template-columns:repeat(2,1fr)}.famous-card.size-lg,.famous-card.size-md{grid-column:span 2}.famous-card.size-sm{grid-column:span 1}}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.5rem 0}.feature-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.25rem 1.5rem;text-align:left;cursor:pointer;color:var(--white);display:flex;flex-direction:column;gap:.5rem;transition:border-color .15s ease}.feature-card:hover{border-color:var(--accent)}.feature-title{font-family:var(--font-display);font-size:1.15rem;color:var(--accent);margin:0;letter-spacing:.06em}.feature-desc{font-family:var(--font-body);font-size:.9rem;line-height:1.5;color:var(--text-dim);margin:0;flex:1}.feature-cta{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}@media (max-width: 720px){.feature-grid{grid-template-columns:1fr}}.method-body{font-family:var(--font-body);font-size:.95rem;line-height:1.7;color:var(--text-dim)}.method-body p{margin:0 0 .9rem}.method-body ul,.method-body ol{margin:0 0 .9rem;padding-left:1.3rem}.method-body li{margin-bottom:.5rem}.method-body strong{color:var(--white)}.method-body code{font-family:var(--font-mono);font-size:.85em;background:var(--bg-panel-2);color:var(--accent);padding:.1em .4em;border-radius:4px}.section-intro{margin:1.5rem 0 1.25rem}.section-eyebrow{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 .75rem}.section-headline{font-family:var(--font-display);font-size:2.2rem;line-height:1.2;color:var(--white);margin:0 0 .75rem;max-width:700px;letter-spacing:.06em}.section-body{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--text-dim);max-width:640px;margin:0}.stat-strip{display:flex;gap:2.5rem;flex-wrap:wrap;margin:1.5rem 0;padding:1.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.stat-strip-item{display:flex;flex-direction:column;gap:.35rem}.stat-strip-num{font-family:var(--font-display);font-size:2.4rem;color:var(--white);line-height:1}.stat-strip-divider{display:block;width:28px;height:2px;background:var(--accent)}.stat-strip-label{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}.filter-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem 1.4rem;margin:1.5rem 0}.filter-panel .era-banner{margin-top:0}.filter-panel .result-count{margin-bottom:0}.stat-board-num{font-family:var(--font-mono);font-size:.75rem;font-weight:600;color:var(--accent);margin-right:.6rem;vertical-align:middle}.hero-headline em,.section-headline em{color:var(--accent);font-style:italic}.hero-controls{display:flex;gap:16px;flex-wrap:wrap;margin:1.5rem 0 2rem}.hero-control{display:flex;flex-direction:column}.hero-input{background:var(--bg-panel);border:1px solid var(--border-bright);color:var(--white);font-family:var(--font-body);font-size:1.05rem;padding:.85rem 1.1rem;border-radius:8px;width:100%}.hero-input:focus{outline:none;border-color:var(--accent)}.hero-input::placeholder{color:var(--text-dim)}.panel-card{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.25rem 2.5rem}.panel-divider{width:100%;height:1px;background:var(--accent);opacity:.5;margin:.6rem 0 .85rem}.panel-tag{position:absolute;right:1.1rem;bottom:.85rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.stat-winner{color:var(--accent);font-weight:700}.comparison-panel{margin-top:2rem}.comparison-panel .stat-board-title{margin:0}.method-section{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--border);scroll-margin-top:4.5rem}.method-section:first-of-type{border-top:none;margin-top:1.5rem;padding-top:0}.method-title-wrap{position:relative;margin:0 0 .75rem}.method-ghost-num{position:absolute;left:-.1em;top:-.55em;font-family:var(--font-display);font-size:3.4rem;color:var(--accent);opacity:.22;line-height:1;z-index:0;pointer-events:none}.method-title{position:relative;z-index:1;font-family:var(--font-display);font-size:1.5rem;color:var(--white);margin:0;letter-spacing:.06em}.method-toggle{display:flex;flex-wrap:wrap;gap:4px;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px;margin:.75rem 0 1rem;width:fit-content;max-width:100%}.method-toggle-btn{background:transparent;border:none;color:var(--text-dim);font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;padding:.45rem .85rem;border-radius:6px;cursor:pointer}.method-toggle-btn:hover{color:var(--white)}.method-toggle-btn.active{background:var(--accent);color:#14100c;font-weight:700}@media (max-width: 640px){.app{padding:1.5rem 1rem 3rem}.site-nav{padding:.9rem 0}.nav-logo{font-size:1.6rem}.wordmark-icon{width:1.8em;height:1.8em}.nav-links{gap:1rem}.hero-headline{font-size:1.5rem}.stat-strip{gap:1.5rem}.stat-strip-num{font-size:1.8rem}.method-toggle-btn{font-size:.65rem;padding:.4rem .6rem}.filter-panel{padding:1rem 1.1rem 1.2rem}.jump-nav{position:static}}@keyframes pitchFadeIn{0%{opacity:0}to{opacity:1}}.pitch-fade-in{animation:pitchFadeIn .5s ease-out}