:root{
  color-scheme:light;
  --bg:#f3f5f9;
  --surface:#fff;
  --text:#202c42;
  --muted:#637087;
  --line:#dce2ec;
  --accent:#315ce8;
  --soft:#eaf0ff;
  --hover:#f8faff;
  --shadow:0 12px 40px #22385d06}

:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#111722;
  --surface:#1a2230;
  --text:#edf2ff;
  --muted:#a0aec4;
  --line:#303c50;
  --accent:#91aeff;
  --soft:#263656;
  --hover:#222d3f;
  --shadow:0 12px 40px #00000012}

@media(prefers-color-scheme:dark){
  :root[data-theme=auto]{
  color-scheme:dark;
  --bg:#111722;
  --surface:#1a2230;
  --text:#edf2ff;
  --muted:#a0aec4;
  --line:#303c50;
  --accent:#91aeff;
  --soft:#263656;
  --hover:#222d3f;
  --shadow:0 12px 40px #00000012}
}

*{
  box-sizing:border-box}
body{
  margin:0;
  isolation:isolate;
  background:var(--bg);
  color:var(--text);
  font:15px/1.65 'Segoe UI','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased}
.button-rain{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  contain:strict;
  color:var(--accent)}
.falling-button{
  position:absolute;
  top:0;
  left:var(--x);
  width:var(--size);
  height:var(--size);
  opacity:0;
  animation:button-fall var(--duration) linear var(--delay) infinite}
.falling-button svg{
  display:block;
  width:100%;
  height:100%;
  stroke-width:1.25}
.button-rain.is-paused .falling-button{
  animation-play-state:paused}
@keyframes button-fall{
  0%{
    opacity:0;
    transform:translate3d(0,-64px,0)}
  10%,85%{
    opacity:var(--opacity)}
  100%{
    opacity:0;
    transform:translate3d(var(--drift),calc(100vh + 64px),0)}
}
a{
  color:inherit;
  text-decoration:none}
button,select{
  font:inherit}
button,select,a{
  -webkit-tap-highlight-color:transparent}
button,select{
  cursor:pointer}
svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0}
a:focus-visible,button:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:5px}
.container{
  width:min(1080px,calc(100% - 64px));
  margin:auto}
.topbar{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)}
.brand{
  display:flex;
  align-items:center;
  gap:12px}
.brand-logo{
  width:39px;
  height:39px;
  object-fit:contain}
.logo-dark{
  display:none}
[data-theme=dark] .logo-light{
  display:none}
[data-theme=dark] .logo-dark{
  display:block}
@media(prefers-color-scheme:dark){
  [data-theme=auto] .logo-light{
  display:none}
[data-theme=auto] .logo-dark{
  display:block}
}
.brand-name{
  font:700 23px/1.2 'Trebuchet MS',sans-serif;
  letter-spacing:-.8px}
.brand-caption{
  display:block;
  color:var(--muted);
  font-size:10px;
  letter-spacing:2px;
  margin-top:5px}
.settings{
  display:flex;
  gap:10px;
  align-items:center}
.select-wrap{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface)}
.select-wrap svg{
  width:17px;
  height:17px;
  color:var(--muted)}
select{
  border:0;
  background:transparent;
  color:var(--text);
  font-size:12px;
  padding:6px 2px;
  max-width:160px}
option{
  background:var(--surface);
  color:var(--text)}
.select-wrap[hidden]{
  display:none}
.settings-dropdown{
  position:relative;
  min-width:0}
.preference-trigger{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  font-size:12px;
  text-align:left;
  transition:border-color .18s,background .18s,box-shadow .18s}
.preference-trigger:hover{
  background:var(--hover);
  border-color:var(--accent)}
.preference-trigger[aria-expanded=true]{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--soft)}
.preference-trigger svg{
  width:17px;
  height:17px;
  color:var(--muted)}
.preference-value{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.preference-trigger .preference-chevron{
  width:13px;
  height:13px;
  transition:transform .18s}
.preference-trigger[aria-expanded=true] .preference-chevron{
  transform:rotate(180deg)}
.preference-panel{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:20;
  width:220px;
  max-width:calc(100vw - 36px);
  padding:8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 16px 42px #0a183324,0 3px 8px #0a18330a;
  transform-origin:top right;
  animation:preference-reveal .16s ease-out}
.preference-panel[hidden]{
  display:none}
.preference-heading{
  margin:3px 8px 7px;
  color:var(--muted);
  font-size:11px;
  font-weight:500;
  letter-spacing:.3px}
.preference-option{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:44px;
  padding:8px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font-size:13px;
  text-align:left;
  transition:background .15s,color .15s}
.preference-option + .preference-option{
  margin-top:3px}
.preference-option[aria-checked=true]{
  color:var(--accent);
  background:var(--soft)}
.preference-option:hover,
.preference-option:focus-visible{
  background:var(--hover)}
.preference-option:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px}
.preference-option[aria-checked=true]:hover,
.preference-option[aria-checked=true]:focus-visible{
  background:var(--soft)}
.preference-symbol{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
  font:600 11px/1 Consolas,'Microsoft YaHei',sans-serif}
.preference-symbol svg{
  width:16px;
  height:16px}
.preference-option[aria-checked=true] .preference-symbol{
  color:var(--accent);
  border-color:transparent;
  background:var(--surface)}
.preference-option .preference-check{
  margin-left:auto;
  width:16px;
  height:16px;
  opacity:0}
.preference-option[aria-checked=true] .preference-check{
  opacity:1}
@keyframes preference-reveal{
  from{opacity:0;transform:translateY(-5px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:32px 0 28px}
.eyebrow{
  font:600 11px/1.4 Consolas,monospace;
  letter-spacing:2.8px;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:9px}
.eyebrow:before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent)}
h1{
  font-size:clamp(36px,5vw,56px);
  line-height:1.18;
  letter-spacing:-2px;
  margin:12px 0;
  font-weight:750}
.hero p{
  color:var(--muted);
  margin:0;
  max-width:570px}
.section-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px}
.section-heading h2{
  font-size:16px;
  margin:0;
  font-weight:650}
.section-heading .count{
  font:11px Consolas,monospace;
  border:1px solid var(--line);
  padding:0 6px;
  border-radius:5px;
  color:var(--muted)}
.section-heading .rule{
  height:1px;
  background:var(--line);
  flex:1;
  margin-left:8px}
.drivers{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:16px}
.driver-card{
  display:flex;
  flex-direction:column;
  position:relative;
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  min-width:0;
  box-shadow:var(--shadow);
  transition:transform .2s,border-color .2s,background .2s}
.driver-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  background:var(--hover)}
.driver-card.featured{
  background:#315ce8;
  color:#fff;
  border-color:#315ce8}
.featured:hover{
  background:#284fd0}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:30px}
.icon-box{
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:13px;
  display:grid;
  place-items:center;
  color:var(--accent)}
.featured .icon-box{
  background:#ffffff15;
  border-color:#ffffff30;
  color:#fff}
.badge{
  font-size:10px;
  letter-spacing:.4px;
  background:var(--bg);
  color:var(--muted);
  padding:3px 9px;
  border-radius:6px}
.featured .badge{
  background:#ffffff20;
  color:#fff}
.driver-card h3{
  font-size:19px;
  line-height:1.4;
  margin:0 0 9px;
  font-weight:650}
.description{
  color:var(--muted);
  font-size:12px;
  margin:0 0 28px;
  flex:1;
  line-height:1.85}
.featured .description{
  color:#e0e7ff}
.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top:16px;
  border-top:1px solid var(--line)}
.featured .card-bottom{
  border-color:#ffffff35}
.url{
  font:12px/1.5 Consolas,monospace;
  overflow-wrap:anywhere}
.card-bottom svg{
  width:18px;
  height:18px}
.community-section{
  margin-top:34px}
.community-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}
.community-card{
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid var(--line);
  border-radius:15px;
  padding:22px;
  background:var(--surface);
  transition:border-color .2s,background .2s}
.community-card:hover{
  border-color:var(--accent);
  background:var(--hover)}
.community-card h3{
  font-size:15px;
  margin:0 0 3px}
.community-card p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  overflow-wrap:anywhere}
.community-card .info{
  flex:1;
  min-width:0}
.community-card>.arrow{
  width:18px;
  height:18px;
  color:var(--muted)}
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:42px;
  padding:22px 0 28px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px}
.footer-brand{
  font-family:'Trebuchet MS',sans-serif;
  font-weight:700;
  letter-spacing:.4px;
  white-space:nowrap}
.skip-link{
  position:fixed;
  top:-100px;
  left:12px;
  background:var(--surface);
  padding:10px;
  z-index:10}
.skip-link:focus{
  top:12px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
@media(min-width:1500px){
  .container{
  padding-top:12px}
.hero{
  padding-top:40px;
  padding-bottom:30px}
}
@media(max-width:800px){
  .drivers{
  grid-template-columns:1fr 1fr}
.featured{
  grid-column:auto}
.featured .card-top{
  margin-bottom:20px}
.hero{
  padding:28px 0 24px}
.driver-card{
  padding:23px}
.community-card{
  padding:18px;
  gap:12px}
.community-card .icon-box{
  width:36px;
  height:36px}
}
@media(max-width:540px){
  .container{
  width:calc(100% - 36px)}
.topbar{
  flex-wrap:wrap;
  padding:18px 0 14px;
  gap:14px}
.brand-name{
  font-size:21px}
.settings{
  width:100%;
  gap:8px}
.settings-dropdown{
  flex:1}
.settings-dropdown:last-of-type{
  flex:1.12}
.preference-trigger{
  width:100%;
  gap:6px;
  padding-inline:9px}
.settings-dropdown:first-of-type .preference-panel{
  left:0;
  right:auto;
  transform-origin:top left}
.select-wrap{
  flex:1;
  justify-content:center}
select{
  width:100%;
  max-width:none}
.hero{
  padding:24px 0 22px;
  gap:0}
.hero h1{
  font-size:37px;
  letter-spacing:-1.5px}
.hero p{
  font-size:13px}
.eyebrow{
  font-size:10px}
.drivers,.community-grid{
  grid-template-columns:1fr}
.featured{
  grid-column:auto}
.driver-card{
  padding:22px}
.card-top{
  margin-bottom:20px}
.description{
  margin-bottom:20px}
.community-section{
  margin-top:28px}
.footer{
  align-items:flex-start;
  flex-direction:column;
  gap:5px;
  margin-top:30px}
.driver-card h3{
  font-size:20px}
.falling-button:nth-child(n+17){
  display:none;
  animation:none}
}
@media(prefers-reduced-motion:reduce){
  .button-rain{
  display:none}
  *,*:before,*:after{
  transition:none!important;
  animation:none!important}
}