:root{
  --color-primary:#FF4B2B;
  --color-primary-dark:#E63E1F;
  --color-secondary:#1E3A8A;
  --color-accent:#FFD700;
  --color-bg:#F8F5F0;
  --color-surface:#FFFFFF;
  --color-text:#111827;
  --color-muted:#6B7280;
  --color-success:#10B981;
  --color-danger:#EF4444;
  --color-border:#E5E7EB;
  --font-heading:'Archivo Black','PingFang SC','Microsoft YaHei',sans-serif;
  --font-number:'Roboto Mono','PingFang SC','Microsoft YaHei',monospace;
  --font-body:'PingFang SC','Microsoft YaHei',sans-serif;
  --header-h:64px;
  --bottom-nav-h:58px;
  --radius:14px;
  --space:clamp(1rem, 2.5vw, 2rem);
  --shadow:4px 6px 0 rgba(17,24,39,.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.7;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.2;font-weight:400;}
p{margin-bottom:1em;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font:inherit;border:none;background:none;color:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;}
.container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:var(--space);padding-right:var(--space);}
.skip-link{
  position:absolute;
  left:-9999px;
  top:1rem;
  z-index:1200;
  background:var(--color-accent);
  color:#111827;
  padding:.75rem 1.1rem;
  font-weight:700;
  border-radius:0 8px 8px 0;
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
}
.skip-link:focus{left:0;}
.progress-bar{
  position:fixed;
  top:0;
  left:0;
  z-index:1100;
  height:5px;
  width:0;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
  pointer-events:none;
}
.site-header{
  position:relative;
  z-index:500;
  background:var(--color-bg);
}
.site-header::before{
  content:"";
  display:block;
  height:5px;
  background:linear-gradient(90deg,var(--color-primary) 0 55%,var(--color-accent) 55% 75%,var(--color-secondary) 75% 100%);
}
.header-top{
  background:var(--color-secondary);
  border-bottom:3px solid var(--color-text);
}
.header-top__inner{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  gap:1rem;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  color:#fff;
  line-height:1.2;
}
.brand-mark__logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--color-accent);
  color:var(--color-text);
  font-family:var(--font-heading);
  font-size:1.1rem;
  font-weight:700;
  border:2px solid var(--color-text);
  border-radius:10px;
  box-shadow:2px 2px 0 rgba(0,0,0,.25);
  transform:rotate(-4deg);
}
.brand-mark__name{
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.05em;
}
.brand-mark__tag{
  display:block;
  font-family:var(--font-number);
  font-size:.65rem;
  letter-spacing:.18em;
  color:var(--color-accent);
  text-transform:uppercase;
}
.header-download{margin-left:auto;}
.nav-toggle{display:none;}
.site-nav{
  background:var(--color-surface);
  border-bottom:3px solid var(--color-text);
}
.site-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:58px;
}
.nav-list{
  display:flex;
  align-items:stretch;
}
.nav-list__item{
  display:flex;
  align-items:stretch;
}
.nav-list__item + .nav-list__item{
  border-left:1px solid var(--color-border);
}
.nav-list__link{
  display:flex;
  align-items:baseline;
  gap:.45rem;
  padding:.9rem .65rem;
  font-weight:700;
  font-size:.93rem;
  color:var(--color-text);
  border-bottom:4px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.nav-list__index{
  font-family:var(--font-number);
  font-size:.7rem;
  color:var(--color-primary);
  font-weight:400;
}
.nav-list__link:hover{
  color:var(--color-primary);
  border-bottom-color:var(--color-primary);
}
.nav-list__link[aria-current="page"]{
  color:var(--color-primary);
  border-bottom-color:var(--color-primary);
}
.nav-note{
  font-family:var(--font-number);
  font-size:.72rem;
  color:var(--color-muted);
  letter-spacing:.08em;
  white-space:nowrap;
  text-align:right;
}
.bottom-tabs{display:none;}
.back-to-top{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:600;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  font-weight:700;
  background:var(--color-accent);
  color:var(--color-text);
  border:2px solid var(--color-text);
  border-radius:50%;
  box-shadow:4px 4px 0 rgba(0,0,0,.2);
  opacity:0;
  visibility:hidden;
  transform:scale(.8);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.back-to-top[data-visible]{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem 1.1rem;
  border:2px solid var(--color-text);
  border-radius:10px;
  font-weight:700;
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:3px 3px 0 rgba(17,24,39,.25);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 rgba(17,24,39,.2);
}
.btn:active{
  transform:translate(2px,2px);
  box-shadow:0 0 0 transparent;
}
.btn--primary{
  background:var(--color-primary);
  color:#fff;
}
.btn--accent{
  background:var(--color-accent);
  color:var(--color-text);
}
.btn--ghost{
  background:transparent;
  color:inherit;
  box-shadow:none;
}
.section{
  padding:clamp(2.5rem,6vw,5rem) 0;
}
.section--tinted{
  background:var(--color-surface);
  border-top:3px solid var(--color-text);
  border-bottom:3px solid var(--color-text);
}
.section-head{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  border-bottom:4px solid var(--color-text);
  padding-bottom:.6rem;
  margin-bottom:1.75rem;
}
.section-head__index{
  font-family:var(--font-number);
  font-size:1.2rem;
  font-weight:700;
  color:var(--color-primary);
}
.section-head__title{
  font-family:var(--font-heading);
  font-size:1.9rem;
  line-height:1.1;
}
.grid{
  display:grid;
  gap:1.5rem;
}
.grid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.panel{
  background:var(--color-surface);
  border:3px solid var(--color-text);
  border-radius:var(--radius);
  box-shadow:7px 7px 0 rgba(17,24,39,.15);
  padding:clamp(1.25rem,3vw,2rem);
}
.card{
  background:var(--color-surface);
  border:2px solid var(--color-border);
  border-radius:12px;
  padding:1.25rem;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.card:hover{
  border-color:var(--color-text);
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 rgba(17,24,39,.12);
}
.card__num{
  font-family:var(--font-number);
  font-size:2.2rem;
  font-weight:700;
  color:var(--color-primary);
  line-height:1;
}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  padding:1.25rem 0;
  font-family:var(--font-number);
  font-size:.78rem;
  color:var(--color-muted);
}
.breadcrumb a{
  color:var(--color-secondary);
  font-weight:700;
}
.breadcrumb a:hover{
  text-decoration:underline;
}
.breadcrumb__sep{
  color:var(--color-primary);
}
.prose{
  max-width:72ch;
  font-size:1rem;
  line-height:1.8;
}
.prose h2{
  font-size:1.5rem;
  margin:1.5em 0 .5em;
}
.prose h3{
  font-size:1.2rem;
  margin:1.3em 0 .4em;
}
.prose p{
  margin-bottom:1em;
}
.prose ul{
  list-style:square;
  padding-left:1.5rem;
  margin-bottom:1em;
}
.score-strip{
  display:flex;
  gap:.85rem;
  overflow-x:auto;
  padding:.5rem .25rem 1rem;
  scroll-snap-type:x proximity;
}
.score-strip__item{
  flex:0 0 auto;
  min-width:150px;
  background:var(--color-surface);
  border:2px solid var(--color-text);
  border-radius:10px;
  box-shadow:4px 4px 0 rgba(17,24,39,.12);
  padding:.8rem;
  font-family:var(--font-number);
  display:grid;
  gap:.4rem;
  scroll-snap-align:start;
}
.score-strip__league{
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--color-muted);
  text-transform:uppercase;
}
.score-strip__teams{
  display:flex;
  justify-content:space-between;
  font-weight:700;
  font-size:.85rem;
}
.score-strip__score{
  color:var(--color-primary);
  font-weight:700;
  font-size:1.2rem;
}
.img-frame{
  position:relative;
  display:block;
  overflow:hidden;
  background:linear-gradient(135deg,var(--color-secondary),#0f1f44);
  border:2px solid var(--color-text);
  border-radius:14px;
}
.img-frame::before{
  content:"";
  display:block;
  padding-top:56.25%;
}
.img-frame--portrait::before{
  padding-top:75%;
}
.img-frame--square::before{
  padding-top:100%;
}
.img-frame--sport{
  background:
    radial-gradient(circle at 75% 25%,rgba(255,215,0,.9) 0 10px,transparent 14px),
    repeating-linear-gradient(135deg,rgba(255,255,255,.15) 0 8px,transparent 8px 20px),
    linear-gradient(145deg,var(--color-primary),var(--color-secondary));
}
.img-frame__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  text-align:center;
  font-family:var(--font-number);
  font-size:.85rem;
  letter-spacing:.18em;
  color:#fff;
}
.tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:.25rem;
  overflow-x:auto;
  border-bottom:3px solid var(--color-text);
  margin-bottom:2rem;
}
.tab{
  flex:0 0 auto;
  padding:.65rem 1.1rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.9rem;
  border:2px solid transparent;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  color:var(--color-muted);
  background:transparent;
}
.tab:hover{
  color:var(--color-primary);
}
.tab[aria-selected="true"]{
  color:var(--color-text);
  background:var(--color-surface);
  border-color:var(--color-text);
  border-bottom:3px solid var(--color-surface);
}
.tabpanel{
  padding:1.5rem 0 .5rem;
}
.tabpanel[hidden]{
  display:none;
}
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease;
}
.reveal[data-visible]{
  opacity:1;
  transform:none;
}
.site-footer{
  background:var(--color-text);
  color:#fff;
  border-top:6px solid var(--color-primary);
}
.footer-shell{
  max-width:1200px;
  margin:0 auto;
  padding:3rem var(--space) 1.5rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:2.5rem;
}
.footer-brand .brand-mark{
  margin-bottom:.9rem;
}
.footer-note{
  font-size:.875rem;
  color:#cbd5e1;
  max-width:34ch;
}
.footer-links__title{
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.15em;
  color:var(--color-accent);
  margin-bottom:1rem;
}
.footer-links__list{
  display:grid;
  gap:.55rem;
}
.footer-links__list a{
  color:#e2e8f0;
  font-size:.9rem;
  border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;
}
.footer-links__list a:hover{
  color:var(--color-accent);
  border-color:var(--color-accent);
}
.footer-contact{
  font-family:var(--font-number);
  font-size:.8rem;
  color:#cbd5e1;
}
.footer-contact p{
  margin-bottom:.4rem;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem;
  margin-top:2.5rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.15);
  font-family:var(--font-number);
  font-size:.75rem;
  color:#9ca3af;
}
@media (max-width:1024px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }
  .grid--3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .nav-list__link{
    font-size:.88rem;
    padding:.8rem .4rem;
  }
  .nav-note{
    display:none;
  }
}
@media (max-width:768px){
  :root{
    --header-h:58px;
    --bottom-nav-h:58px;
  }
  body{
    padding-bottom:var(--bottom-nav-h);
  }
  .header-top__inner{
    gap:.6rem;
  }
  .brand-mark__name{
    font-size:1.15rem;
  }
  .brand-mark__tag{
    font-size:.58rem;
  }
  .header-download{
    padding:.5rem .7rem;
    font-size:.85rem;
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.4rem .55rem;
    border:2px solid var(--color-text);
    border-radius:8px;
    background:var(--color-surface);
    color:var(--color-text);
    font-size:.7rem;
    font-weight:700;
    box-shadow:2px 2px 0 rgba(0,0,0,.2);
  }
  .nav-toggle__icon{
    display:inline-flex;
    flex-direction:column;
    gap:3px;
  }
  .nav-toggle__line{
    display:block;
    width:16px;
    height:2px;
    background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1){
    transform:translateY(5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2){
    opacity:0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3){
    transform:translateY(-5px) rotate(-45deg);
  }
  .site-nav{
    position:fixed;
    top:var(--header-h);
    bottom:var(--bottom-nav-h);
    left:0;
    right:0;
    z-index:900;
    background:var(--color-bg);
    border:none;
    transform:translateX(105%);
    transition:transform .25s ease;
    overflow-y:auto;
    box-shadow:-6px 0 24px rgba(0,0,0,.15);
  }
  .site-nav[data-open]{
    transform:translateX(0);
  }
  .site-nav__inner{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:1.25rem 1rem;
  }
  .nav-list{
    flex-direction:column;
    width:100%;
  }
  .nav-list__item{
    display:block;
  }
  .nav-list__item + .nav-list__item{
    border-left:none;
    border-top:1px solid var(--color-border);
  }
  .nav-list__link{
    padding:.9rem .25rem;
    border-left:4px solid transparent;
    border-bottom:none;
    font-size:1.05rem;
  }
  .nav-list__link[aria-current="page"]{
    background:rgba(255,75,43,.08);
    border-left-color:var(--color-primary);
    color:var(--color-primary);
  }
  .nav-note{
    display:block;
    margin-top:1.25rem;
    text-align:left;
    padding-top:1rem;
    border-top:2px dashed var(--color-border);
  }
  .bottom-tabs{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:950;
    background:var(--color-secondary);
    border-top:3px solid var(--color-text);
  }
  .bottom-tabs__list{
    display:flex;
    justify-content:space-around;
    align-items:stretch;
    max-width:1200px;
  }
  .bottom-tabs__link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.1rem;
    padding:.45rem .35rem;
    color:#fff;
    font-family:var(--font-number);
    font-size:.6rem;
    letter-spacing:.08em;
  }
  .bottom-tabs__link[aria-current="page"]{
    color:var(--color-accent);
  }
  .bottom-tabs__num{
    font-size:1.05rem;
    font-weight:700;
    color:var(--color-accent);
    line-height:1;
  }
  .bottom-tabs__link[aria-current="page"] .bottom-tabs__num{
    color:var(--color-primary);
  }
  .back-to-top{
    bottom:calc(var(--bottom-nav-h) + .75rem);
    right:.9rem;
  }
  .grid--2,
  .grid--3{
    grid-template-columns:1fr;
  }
  .section-head__title{
    font-size:1.5rem;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .footer-shell{
    padding-top:2rem;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .score-strip__item{
    min-width:130px;
  }
}
@media (prefers-reduced-motion: reduce){
  *{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .reveal{
    opacity:1;
    transform:none;
  }
}