:root{--bg:#0a0a0a;--panel:#121212;--line:#1f1f1f;--text:#eaeaea;--muted:#b5b5b5;--brand:#00e0b8}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block;border-radius:16px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}.sr-only{position:absolute;left:-9999px}
.site-header{border-bottom:1px solid var(--line);background:rgba(0,0,0,.5);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.brand{display:flex;gap:.5rem;align-items:center;font-weight:700;padding:.75rem 0}.brand__logo{font-size:1.25rem}
.nav{display:flex;gap:1rem;list-style:none;margin:0;padding:.75rem 0;flex-wrap:wrap}.nav a{color:var(--muted)}.nav a:hover{color:var(--text)}
.hero{padding:48px 0 8px}.hero h1{font-size:2rem;margin:0 0 .5rem}.hero p{margin:.25rem 0 1rem;color:var(--muted)}
.site-search{display:flex;gap:.5rem}.site-search input{flex:1;min-width:0;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:.6rem .8rem}
.site-search button{border:0;background:var(--brand);color:#07211b;border-radius:12px;padding:.6rem 1rem;font-weight:700;cursor:pointer}
.section{padding:32px 0;border-top:1px solid var(--line)}.section h2{font-size:1.25rem;color:var(--muted);margin:0 0 .75rem}
.section-card{display:grid;grid-template-columns:1fr;gap:12px;background:var(--panel);padding:12px;border:1px solid var(--line);border-radius:16px;transition:transform .12s ease,border-color .12s}
.section-card:hover{transform:translateY(-2px);border-color:#2a2a2a}.section-meta h3{margin:.25rem 0 0;font-size:1.1rem}.section-meta p{margin:.25rem 0 0;color:var(--muted)}
.site-footer{border-top:1px solid var(--line);margin-top:24px;padding:24px 0;color:var(--muted)}.site-footer a{color:var(--muted)}.site-footer a:hover{color:var(--text)}
@media (min-width:720px){.section-card{grid-template-columns:2fr 3fr;align-items:center}}

/*.play-button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #00e0b8;
  color: #0a0a0a;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s;
}
.play-button:hover {
  background-color: #00c0a0;
}
/* This section is for slidingr */
.runner-box {
  display: block;
  max-width: 282px;
  margin: 20px auto;
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #333;
  transition: transform 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.runner-box:hover {
  transform: scale(1.03);
  border-color: #00e0b8;
}
.runner-box img {
  width: 100%;
  display: block;
}
.runner-meta {
  padding: 16px;
  text-align: center;
}
.runner-meta h3 {
  margin: 0;
  color: #00e0b8;
  font-size: 1.4rem;
}
.runner-meta p {
  margin: 8px 0 0;
  color: #b5b5b5;
  font-size: 0.9rem;
}