@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #17221f; --muted: #6d7872; --paper: #f3f0e9; --panel: #fffdf8; --line: #d9d8cf; --mint: #b9dfc7; --orange: #ef7657; --navy: #213c4d; --mono: 'DM Mono', monospace; --display: 'Space Grotesk', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--display); }
body:before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .3; background-image: linear-gradient(rgba(23,34,31,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,34,31,.035) 1px, transparent 1px); background-size: 32px 32px; }
a { color: inherit; text-decoration: none; }
.app-shell { width: min(1380px, calc(100% - 48px)); margin: auto; position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .07em; }
.brand { font-weight: 500; }.brand span { color: var(--muted); }.topbar-meta { color: var(--muted); display: flex; gap: 9px; align-items: center; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }.status-dot.live { background: #4eaa73; }
.tabbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 0; }.tabbar a { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 9px 15px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; }.tabbar a:hover { border-color: var(--orange); color: var(--ink); }.tabbar a.active { background: var(--navy); border-color: var(--navy); color: #f6f1e6; }
.season-switcher { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; }.season-switcher:empty { padding: 0; }.season-switcher label { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }.season-switcher select { font: 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); padding: 9px 15px; border: 1px solid var(--line); background: #f8f6f0; cursor: pointer; }.season-switcher select:hover { border-color: var(--orange); }.season-switcher select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.landing-page .app-shell { width: min(1200px, calc(100% - 40px)); }
.landing-nav { display: flex; gap: 18px; align-items: center; color: var(--muted); }
.landing-nav a { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .2s ease; }
.landing-nav a:hover { color: var(--orange); }
.landing-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; padding: 68px 0 32px; align-items: center; }
.landing-copy h1 { font-size: clamp(42px, 5vw, 78px); line-height: .94; letter-spacing: -.06em; margin: 0; }
.hero { min-height: 300px; display: flex; justify-content: space-between; align-items: end; padding: 58px 0 48px; }.eyebrow, .stat-label { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 13px; }.hero h1 { font-size: clamp(42px, 6vw, 88px); line-height: .93; letter-spacing: -.055em; margin: 0; font-weight: 600; }.hero h1 em { color: var(--orange); font-style: normal; }.hero-copy { color: var(--muted); margin: 25px 0 0; font-size: 16px; }.hero-copy a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }.hero-copy a:hover { color: var(--orange); text-decoration-color: var(--orange); }.hero-photo { width: 190px; height: 190px; flex-shrink: 0; transform: rotate(6deg); border: 6px solid var(--panel); box-shadow: 0 10px 24px rgba(23,34,31,.18); overflow: hidden; }.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--line); font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--navy); border-color: var(--navy); color: #f5f0e8; }
.button.secondary { background: var(--panel); color: var(--ink); }
.hero-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font: 12px var(--mono); }
.hero-points li { position: relative; padding-left: 16px; }
.hero-points li:before { content: '•'; position: absolute; left: 0; color: var(--orange); }
.hero-panel { display: flex; justify-content: center; }
.hero-screenshot { width: min(100%, 560px); height: auto; display: block; border: 1px solid var(--line); box-shadow: 0 22px 48px rgba(23,34,31,.08); }
.feature-block, .pricing-block, .subscribe-block { padding-top: 24px; }
.section-heading { margin-bottom: 20px; }
.section-heading.narrow { max-width: 720px; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 54px); line-height: 1.02; letter-spacing: -.05em; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.feature-card, .pricing-card, .subscribe-panel, .split-panel { background: var(--panel); border: 1px solid var(--line); }
.feature-card { padding: 28px 22px; }
.feature-icon { font-size: 28px; }
.feature-card h3 { margin: 18px 0 10px; font-size: 24px; letter-spacing: -.04em; }
.feature-card p, .body-copy, .pricing-card ul, .subscribe-steps div { color: var(--muted); line-height: 1.6; }
.split-panel { margin-top: 32px; padding: 26px 24px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; }
.split-panel h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.05em; }
.body-copy { margin: 18px 0 0; max-width: 620px; font-size: 17px; }
.checklist { display: grid; gap: 12px; font-size: 15px; }
.checklist div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f7f3ec; border: 1px solid var(--line); }
.checklist span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--ink); font: 12px var(--mono); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.pricing-grid.single-plan { grid-template-columns: minmax(0, 760px); justify-content: center; }
.pricing-card { padding: 24px 20px; }
.wider-plan { width: 100%; max-width: 760px; }
.plan-name { margin: 0; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.price-row { display: flex; align-items: baseline; gap: 8px; margin: 20px 0; }
.price { font-size: 48px; letter-spacing: -.06em; }
.period { font: 12px var(--mono); color: var(--muted); }
.pricing-card ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.pricing-card li { position: relative; padding-left: 16px; }
.pricing-card li:before { content: '•'; position: absolute; left: 0; color: var(--orange); }
.featured-plan { background: var(--navy); color: #f6f1e6; border-color: var(--navy); transform: translateY(-4px); }
.featured-plan .plan-name, .featured-plan li, .featured-plan .period { color: #a9beb9; }
.featured-plan .button.primary { background: var(--orange); border-color: var(--orange); color: #f6f1e6; font-weight: 600; }
.subscribe-panel { margin-top: 32px; padding: 26px 24px; }
.subscribe-panel h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.05em; }
.subscribe-steps { display: grid; gap: 14px; margin-top: 22px; }
.subscribe-steps div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); background: #f9f5ee; }
.subscribe-steps span { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: white; font: 12px var(--mono); }
.subscribe-panel .cta-row { margin-top: 26px; }
.mini-note { margin-top: 18px; color: var(--muted); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-list details { background: var(--panel); border: 1px solid var(--line); padding: 18px 22px; }
.faq-list summary { cursor: pointer; font-size: 17px; font-weight: 600; letter-spacing: -.01em; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: '+'; display: inline-block; width: 18px; color: var(--orange); font-weight: 600; }
.faq-list details[open] summary::before { content: '−'; }
.faq-list details p { margin: 14px 0 2px 18px; color: var(--muted); line-height: 1.6; }
.faq-list details p a, footer a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.faq-list details p a:hover, footer a:hover { color: var(--orange); text-decoration-color: var(--orange); }
footer { padding: 30px 0 50px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.reveal { animation: rise .65s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .landing-hero, .split-panel, .feature-grid, .pricing-grid { grid-template-columns: 1fr; }
  .landing-nav { display: none; }
  .feature-grid { display: grid; }
  .pricing-card.featured-plan { transform: none; }
}

@media (max-width: 560px) {
  .app-shell { width: min(100% - 24px, 640px); }
  .topbar { padding: 18px 0; }
  .landing-hero { padding-top: 44px; }
  .button { width: 100%; }
  .cta-row { flex-direction: column; }
  .subscribe-steps div { align-items: flex-start; }
}
.hero { min-height: 300px; display: flex; justify-content: space-between; align-items: end; padding: 58px 0 48px; }.eyebrow, .stat-label { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 13px; }.hero h1 { font-size: clamp(42px, 6vw, 88px); line-height: .93; letter-spacing: -.055em; margin: 0; font-weight: 600; }.hero h1 em { color: var(--orange); font-style: normal; }.hero-copy { color: var(--muted); margin: 25px 0 0; font-size: 16px; }.hero-copy a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }.hero-copy a:hover { color: var(--orange); text-decoration-color: var(--orange); }.hero-photo { width: 190px; height: 190px; flex-shrink: 0; transform: rotate(6deg); border: 6px solid var(--panel); box-shadow: 0 10px 24px rgba(23,34,31,.18); overflow: hidden; }.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stat-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin-bottom: 28px; }.stat-card { background: var(--panel); border: 1px solid var(--line); min-height: 140px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }.stat-card strong { font-size: 30px; letter-spacing: -.04em; }.stat-card small { font: 10px var(--mono); color: var(--muted); }.stat-card-dark { background: var(--navy); color: #f6f1e6; border-color: var(--navy); }.stat-card-dark .stat-label, .stat-card-dark small { color: #a9beb9; }.stat-card-accent { background: var(--mint); border-color: var(--mint); }
.stats-freshness-banner { display: flex; align-items: start; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--orange); padding: 15px 18px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }.stats-freshness-banner[hidden] { display: none; }.stats-freshness-banner .notebook-icon { font-size: 18px; line-height: 1.4; }
.dashboard-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }.lower-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }.panel { background: var(--panel); border: 1px solid var(--line); padding: 25px; min-width: 0; }.panel-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 23px; }.panel-heading .eyebrow { margin-bottom: 7px; }.panel h2 { margin: 0; font-size: 27px; letter-spacing: -.045em; }.panel-index { font: 11px var(--mono); color: var(--muted); }
.progression-section { margin: 10px 0; }.leaderboard-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }.leaderboard { padding: 21px; }.leaderboard h3 { margin: 0; font-size: 18px; letter-spacing: -.04em; }.dev-table-wrap { max-height: 560px; margin-top: 15px; }.dev-table-wrap thead { position: sticky; top: 0; background: var(--panel); }.dev-table th.num, .dev-table td.num { text-align: right; }.dev-table .gap-behind { color: var(--muted); font: 11px var(--mono); }.dev-table .gap-leader { color: var(--orange); font: 11px var(--mono); font-weight: 600; }.sparkline { color: var(--orange); width: 120px; height: 30px; display: block; }.sparkline svg { width: 100%; height: 100%; overflow: visible; display: block; }.trend-cell { padding-top: 9px; padding-bottom: 9px; }.projection-note { border-top: 1px solid #e8e6de; color: var(--muted); font: 9px var(--mono); line-height: 1.5; margin: 18px 0 0; padding-top: 15px; }
.team-race { margin-bottom: 10px; padding: 21px; }.team-race h3 { margin: 0; font-size: 22px; letter-spacing: -.04em; }.team-race .dev-table-wrap { max-height: 420px; margin: 15px 0 20px; }.race-chart { overflow-x: auto; }
.table-group-heading { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; margin-top: 4px; }
.week-picker { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 21px; margin-bottom: 10px; }.week-picker .eyebrow { margin: 0; }.week-picker-buttons { display: flex; flex-wrap: wrap; gap: 6px; }.week-picker-buttons button { font: 11px var(--mono); letter-spacing: .04em; color: var(--muted); background: #f8f6f0; border: 1px solid var(--line); padding: 8px 13px; cursor: pointer; }.week-picker-buttons button:hover { border-color: var(--orange); color: var(--ink); }.week-picker-buttons button.active { background: var(--navy); border-color: var(--navy); color: #f6f1e6; }
.expand-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }.expand-toggle .caret { display: inline-block; color: var(--muted); font-size: 10px; transition: transform .15s ease; }tr.expanded .expand-toggle .caret { transform: rotate(90deg); }
.detail-row td { padding: 0; border-top: 0; }.week-breakdown { background: #f8f5ed; padding: 14px 21px 16px; }.week-breakdown p { margin: 0 0 8px; font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }.week-breakdown table { font-size: 12px; max-width: 360px; }.week-breakdown th, .week-breakdown td { padding: 6px 9px; }.race-chart svg { display: block; width: 100%; min-width: 600px; height: 270px; }.race-chart text { fill: var(--muted); font: 10px var(--mono); }.race-legend { display: flex; flex-wrap: wrap; gap: 18px; font: 10px var(--mono); color: var(--muted); }.race-legend span { display: flex; align-items: center; gap: 6px; }.race-legend i { display: inline-block; width: 9px; height: 9px; }
.featured-player { background: #f7e6aa; color: var(--ink); }.dev-table tr.featured-player td { background: #f7e6aa; }.dev-table tr.featured-player td:first-child { box-shadow: inset 3px 0 0 var(--orange); }.featured-label { color: var(--orange); font: 9px var(--mono); letter-spacing: .04em; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: left; padding: 0 9px 13px; white-space: nowrap; } td { border-top: 1px solid #e8e6de; padding: 13px 9px; white-space: nowrap; } td:first-child { padding-left: 9px; } tbody tr:hover { background: #f8f5ed; }.record { font-family: var(--mono); font-size: 11px; }.empty { color: var(--muted); font: 11px var(--mono); padding: 18px 9px; }
.week-notebook { display: flex; flex-direction: column; gap: 4px; }.notebook-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 15px 0; border-top: 1px solid #e8e6de; }.notebook-item:first-child { border-top: 0; padding-top: 0; }.notebook-icon { font-size: 22px; line-height: 1.1; }.notebook-label { margin: 0 0 4px; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }.notebook-text { margin: 0; font-size: 14px; line-height: 1.45; }.notebook-section-label { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 22px 0 2px; padding-top: 18px; border-top: 1px dashed var(--line); }.notebook-section-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }.notebook-item.lowlight .notebook-icon { filter: grayscale(.2); }
.award-race { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }.award-race li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: baseline; font-size: 13px; }.award-rank { font: 11px var(--mono); color: var(--muted); }.award-race li:first-child .award-rank { color: var(--orange); font-weight: 600; }.award-name small { color: var(--muted); font: 10px var(--mono); }.award-line { font: 11px var(--mono); color: var(--muted); white-space: nowrap; text-align: right; }
.injury-sort-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }.injury-sort-toggle button { font: 11px var(--mono); letter-spacing: .04em; color: var(--muted); background: #f8f6f0; border: 1px solid var(--line); padding: 8px 13px; cursor: pointer; }.injury-sort-toggle button:hover { border-color: var(--orange); color: var(--ink); }.injury-sort-toggle button.active { background: var(--navy); border-color: var(--navy); color: #f6f1e6; }
.injury-list { display: flex; flex-direction: column; }.injury-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #e8e6de; }.injury-row:first-child { border-top: 0; padding-top: 0; }.injury-name { font-size: 13px; }.injury-name small { display: block; color: var(--muted); font: 10px var(--mono); margin-top: 2px; }.tag { display: inline-block; font: 10px var(--mono); padding: 4px 8px; white-space: nowrap; }.tag-hurt { background: #fbe6dd; color: var(--orange); }.tag-ir { background: #f3d9d9; color: #b8452f; }
.playoff-race { display: flex; flex-direction: column; gap: 20px; }.conference-group .conference-label { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }.division-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.division-block { border: 1px solid var(--line); background: #f8f6f0; min-width: 0; }.division-head { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 9px 12px; border-bottom: 1px solid var(--line); }.division-team { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid #e8e6de; font-size: 12px; }.division-team:first-of-type { border-top: 0; }.division-team.leader .div-team-name { font-weight: 700; }.div-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }.div-team-record { font: 11px var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }.div-team-odds { font: 11px var(--mono); text-align: right; white-space: nowrap; min-width: 34px; }.div-seed { font: 9px var(--mono); padding: 3px 6px; text-align: center; min-width: 24px; }.div-seed.in { background: #e0f0e6; color: #2f7a4f; }.div-seed.out { background: #efece2; color: var(--muted); }.division-team.featured-player { background: #f7e6aa; box-shadow: inset 3px 0 0 var(--orange); }.playoff-odds-note { color: var(--muted); font: 9px var(--mono); line-height: 1.5; margin: 4px 0 0; }
.bracket-round { margin-bottom: 16px; }.bracket-round:last-child { margin-bottom: 0; }.bracket-game { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid #e8e6de; font-size: 13px; }.bracket-game:first-of-type { border-top: 0; }.bracket-team { color: var(--muted); }.bracket-team.winner { color: var(--ink); font-weight: 600; }.bracket-team strong { font: 12px var(--mono); margin-left: 4px; }.bracket-at { color: var(--muted); font: 10px var(--mono); }.bracket-pending { margin-left: auto; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.roster-tools { display: grid; grid-template-columns: 1fr 145px; gap: 10px; margin-bottom: 19px; }.search-field, .select-field { display: flex; flex-direction: column; gap: 7px; font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }.search-field input, .select-field select { border: 1px solid var(--line); background: #f8f6f0; color: var(--ink); padding: 12px; font: 12px var(--display); outline: 0; border-radius: 0; }.search-field input:focus, .select-field select:focus { border-color: var(--ink); }.roster-table-wrap { max-height: 420px; }.roster-table-wrap thead { position: sticky; top: 0; background: var(--panel); }.dev-trait { font: 10px var(--mono); padding: 4px 6px; background: #e9f1e9; }
footer { padding: 27px 0 40px; color: var(--muted); font: 10px var(--mono); }
.reveal { animation: rise .65s ease both; }.reveal:nth-child(2) { animation-delay: .08s; }.reveal:nth-child(3) { animation-delay: .16s; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 850px) { .app-shell { width: min(100% - 28px, 650px); }.topbar { padding: 20px 0; }.brand span { display: none; }.hero { min-height: 270px; padding: 45px 0 35px; }.hero-photo { width: 110px; height: 110px; }.stat-grid { grid-template-columns: 1fr; }.lower-grid, .leaderboard-grid, .division-grid { grid-template-columns: 1fr; }.panel { padding: 19px; } }
@media (max-width: 460px) { .hero h1 { font-size: 43px; }.hero-photo { display: none; }.stat-card { min-height: 115px; padding: 17px; }.stat-card strong { font-size: 25px; }.roster-tools { grid-template-columns: 1fr; } }
.demo-banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; background: var(--navy); color: #f6f1e6; padding: 12px 20px; font: 12px var(--mono); letter-spacing: .02em; text-align: center; }.demo-banner strong { color: var(--orange); }.demo-banner a { color: #f6f1e6; background: var(--orange); padding: 7px 14px; border-radius: 3px; text-decoration: none; font-weight: 600; white-space: nowrap; }.demo-banner a:hover { opacity: .88; }
.empty-state-banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; background: var(--navy); color: #f6f1e6; padding: 12px 20px; font: 12px var(--mono); letter-spacing: .02em; text-align: center; }
.sync-warning-banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; background: #fbe6dd; color: var(--ink); border-bottom: 2px solid var(--orange); padding: 12px 20px; font: 12px var(--mono); letter-spacing: .02em; text-align: center; }.sync-warning-banner a { color: var(--ink); font-weight: 600; }