Mistral Mistral Large 4 – Gaming

via Mistral · Generated

  • AIMAC Debt 2.00
  • Cost $0.30
  • Total Violations 1
  • HTML Size 94 KB
  • Em Dashes 44

Screenshot

View Mistral Mistral Large 4 Gaming page View Live Page

Accessibility Issues Found

1 Serious

  • target-size serious 1 instance

    All touch targets must be 24px large, or leave sufficient space

    Example HTML <button class="faq-q" aria-expanded="false">Can I write for Spawnpoint or send a news tip?<svg class="icon"><use href="#i-chevron"></use></svg></bu...

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0B0C0E">
<meta name="description" content="Spawnpoint — independent gaming media. News, reviews, esports coverage, hardware guides and a 340K-strong community. Written by players, for players.">
<title>Spawnpoint — Gaming News, Esports &amp; Reviews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Chakra+Petch:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* ============ Base ============ */
:root{
  --bg:#0B0C0E; --bg-2:#0F1114; --panel:#121419; --panel-2:#16181D;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.17);
  --text:#E9ECE4; --muted:#9AA093;
  --accent:#C8F542; --accent-dim:rgba(200,245,66,.12);
  --red:#FF4D5E; --pink:#FF4D8D;
  --font-display:'Chakra Petch',sans-serif;
  --font-body:'Archivo',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#0B0C0E}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2A2D33;border:2px solid var(--bg)}
.container{max-width:1220px;margin:0 auto;padding:0 24px}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-fill{fill:currentColor;stroke:none}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#0B0C0E;padding:.6rem 1rem;z-index:300;font-weight:600}
.skip-link:focus{left:12px;top:12px;z-index:300}

/* ============ Buttons & chips ============ */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:600;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:.85rem 1.35rem;border:1px solid transparent;transition:all .22s ease;white-space:nowrap}
.btn .icon{transition:transform .22s ease}
.btn:hover .icon{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#0B0C0E}
.btn-primary:hover{background:#DBFF62;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-dark{background:#0B0C0E;color:var(--accent);border-color:#0B0C0E}
.btn-dark:hover{background:#1D2025}
.btn-sm{padding:.6rem 1rem;font-size:.7rem}
.btn:disabled{opacity:.65;cursor:default;transform:none}
.chip{display:inline-flex;align-items:center;padding:.32rem .65rem;border:1px solid rgba(200,245,66,.4);color:var(--accent);font:600 .62rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;width:max-content}
.chip-plain{border-color:var(--line-2);color:var(--muted)}
.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-size:1rem;transition:all .2s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-red{background:var(--red);animation:pulse 1.8s infinite}
.dot-lime{background:var(--accent)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,94,.55)}70%{box-shadow:0 0 0 8px rgba(255,77,94,0)}100%{box-shadow:0 0 0 0 rgba(255,77,94,0)}}

/* ============ Ticker ============ */
.ticker{display:flex;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);height:40px;overflow:hidden}
.ticker-label{display:flex;align-items:center;gap:.5rem;background:var(--accent);color:#0B0C0E;font:700 .66rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding:0 1rem;flex-shrink:0}
.ticker-label .dot{background:#0B0C0E;animation:pulseDark 1.8s infinite}
@keyframes pulseDark{0%{box-shadow:0 0 0 0 rgba(11,12,14,.4)}70%{box-shadow:0 0 0 6px rgba(11,12,14,0)}100%{box-shadow:0 0 0 0 rgba(11,12,14,0)}}
.ticker-viewport{flex:1;overflow:hidden;display:flex;align-items:center}
.ticker-track{display:flex;width:max-content;animation:tick 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-set{display:flex;align-items:center}
.tick-item{font:400 .72rem var(--font-mono);color:var(--muted);white-space:nowrap;padding:0 1.1rem}
.tick-item strong{color:var(--text);font-weight:500}
.tick-item .live-flag{color:var(--red);font-weight:700;letter-spacing:.1em}
.tick-sep{color:var(--accent);font:700 .72rem var(--font-mono);opacity:.7}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,12,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45)}
.header-inner{display:flex;align-items:center;gap:1.6rem;height:76px;position:relative}
.brand{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.brand img{width:44px;height:44px;border:1px solid var(--line-2)}
.brand-text strong{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:.08em;text-transform:uppercase;display:block;line-height:1.1}
.brand-text small{font:400 .58rem var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.15rem}
.main-nav{display:flex;gap:1.5rem;margin-left:auto}
.main-nav a{font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);position:relative;padding:.3rem 0;transition:color .2s}
.main-nav a:hover{color:var(--accent)}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.main-nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.7rem}
.search-box{display:flex;align-items:center;border:1px solid transparent;transition:border-color .25s}
.search-box input{width:0;opacity:0;border:0;background:var(--panel-2);color:var(--text);font:500 .82rem var(--font-body);padding:.55rem 0;transition:all .3s ease;outline:none}
.search-box input::placeholder{color:var(--muted)}
.search-box.open{border-color:var(--line-2)}
.search-box.open input{width:210px;opacity:1;padding:.55rem .8rem}
.nav-toggle{display:none}
.nav-toggle .i-close{display:none}
.nav-toggle.open .i-menu{display:none}
.nav-toggle.open .i-close{display:inline-block}

/* ============ Hero ============ */
.hero{padding:4.2rem 0 3.6rem;background-image:radial-gradient(rgba(200,245,66,.05) 1px,transparent 1.5px);background-size:26px 26px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center}
.kicker{font:500 .68rem var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7rem}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent)}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.55rem);line-height:1.04;text-transform:uppercase;letter-spacing:.01em;margin:1.1rem 0 1.2rem}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-dek{color:var(--muted);font-size:1.02rem;max-width:56ch}
.hero-meta{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;font:400 .7rem var(--font-mono);color:var(--muted);flex-wrap:wrap}
.hero-meta img{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2)}
.hero-meta b{color:var(--text);font-weight:500}
.hero-meta .sep{color:var(--line-2)}
.hero-ctas{display:flex;gap:.9rem;margin-top:1.7rem;flex-wrap:wrap}
.hero-media{position:relative;border:1px solid var(--line-2);background:var(--panel)}
.hero-media img{width:100%;aspect-ratio:10/7;object-fit:cover;filter:saturate(.88) contrast(1.05)}
.hero-media figcaption{font:400 .62rem var(--font-mono);color:var(--muted);letter-spacing:.08em;padding:.65rem .9rem;border-top:1px solid var(--line)}
.hero-media::before,.hero-media::after{content:"";position:absolute;width:52px;height:52px;pointer-events:none}
.hero-media::before{top:-9px;right:-9px;border-top:2px solid var(--accent);border-right:2px solid var(--accent)}
.hero-media::after{bottom:-9px;left:-9px;border-bottom:2px solid var(--accent);border-left:2px solid var(--accent)}
.hero-stat{position:absolute;left:-26px;bottom:44px;background:var(--panel);border:1px solid var(--line-2);padding:1rem 1.2rem;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.hero-stat strong{font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:var(--accent);display:block;line-height:1}
.hero-stat span{font:400 .62rem var(--font-mono);color:var(--muted);letter-spacing:.06em;display:block;margin-top:.4rem;line-height:1.6}

/* ============ Stats strip ============ */
.stats-strip{border-bottom:1px solid var(--line);background:var(--bg-2)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:1.7rem 1.6rem;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat-num{font-family:var(--font-display);font-weight:700;font-size:2.05rem;color:var(--accent);display:block;line-height:1}
.stat span{font:400 .64rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.5rem}

/* ============ Sections common ============ */
.section{padding:4.6rem 0}
.section-panel{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.2rem;flex-wrap:wrap}
.section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.55rem,2.6vw,2.1rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.08;margin-top:.7rem}
.section-title .slash{color:var(--accent);font-weight:500;margin-right:.4rem}
.section-lead{color:var(--muted);max-width:62ch;margin-top:-1.2rem;margin-bottom:2.2rem;font-size:.95rem}
.section-link{font:500 .7rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;transition:color .2s}
.section-link:hover{color:var(--accent)}
.card{background:var(--panel);border:1px solid var(--line);transition:border-color .25s,transform .25s,background .25s}
a.card:hover,.hoverable:hover{border-color:rgba(200,245,66,.45);transform:translateY(-3px)}

/* ============ News + sidebar ============ */
.news-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:2.4rem;align-items:start}
.news-mosaic{display:grid;grid-template-columns:1.35fr 1fr;gap:1.4rem}
.card-feature{grid-row:1 / span 2;display:flex;flex-direction:column;overflow:hidden}
.nf-media{aspect-ratio:16/9.6;overflow:hidden;position:relative}
.nf-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);transition:transform .6s ease}
.card-feature:hover .nf-media img{transform:scale(1.045)}
.card-body{padding:1.4rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
.card-body h3{font-family:var(--font-display);font-weight:600;font-size:1.32rem;line-height:1.25}
a.card:hover h3,a.card:hover h4{color:var(--accent)}
.card-body p{color:var(--muted);font-size:.9rem}
.meta{font:400 .64rem var(--font-mono);color:var(--muted);letter-spacing:.06em;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.meta .icon{color:var(--accent)}
.meta b{color:var(--text);font-weight:500}
.card-h{display:flex;gap:1.1rem;padding:1rem;align-items:center}
.card-h .ch-media{width:118px;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;border:1px solid var(--line)}
.card-h .ch-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s}
.card-h:hover .ch-media img{transform:scale(1.07)}
.card-h .ch-body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.card-h h4{font-family:var(--font-display);font-weight:600;font-size:.94rem;line-height:1.3}
.card-h p{font-size:.78rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mosaic-duo{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
/* Sidebar */
.widget{background:var(--panel);border:1px solid var(--line);padding:1.3rem}
.widget + .widget{margin-top:1.4rem}
.widget-title{font:700 .68rem var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between;align-items:center;padding-bottom:.85rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.widget-title a{color:var(--muted);letter-spacing:.08em}
.widget-title a:hover{color:var(--accent)}
.trend-list li{display:flex;align-items:center;gap:.75rem;padding:.6rem 0}
.trend-list li + li{border-top:1px solid var(--line)}
.trend-rank{font:700 .68rem var(--font-mono);color:var(--muted);width:1.3rem}
.trend-list img{width:40px;height:40px;object-fit:cover;border:1px solid var(--line-2)}
.trend-info{flex:1;min-width:0}
.trend-info strong{font-size:.82rem;display:block;line-height:1.3}
.trend-info span{font:400 .6rem var(--font-mono);color:var(--muted);letter-spacing:.06em}
.trend-up{font:700 .66rem var(--font-mono);color:var(--accent)}
.trend-down{font:700 .66rem var(--font-mono);color:var(--red)}
.patch-list li{padding:.7rem 0}
.patch-list li + li{border-top:1px solid var(--line)}
.patch-ver{font:700 .6rem var(--font-mono);border:1px solid rgba(200,245,66,.4);color:var(--accent);padding:.18rem .45rem;letter-spacing:.08em}
.patch-list strong{display:block;font-size:.82rem;font-weight:600;margin-top:.45rem;line-height:1.35}
.patch-list time{font:400 .6rem var(--font-mono);color:var(--muted);letter-spacing:.06em}
.mini-streams li{display:flex;align-items:center;gap:.7rem;padding:.6rem 0}
.mini-streams li + li{border-top:1px solid var(--line)}
.mini-streams img{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2)}
.mini-streams strong{font-size:.78rem;display:block}
.mini-streams span{font-size:.68rem;color:var(--muted)}
.mini-viewers{margin-left:auto;font:700 .66rem var(--font-mono);color:var(--text);display:flex;align-items:center;gap:.4rem}
.widget-link{display:inline-flex;align-items:center;gap:.4rem;font:500 .66rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:.9rem}

/* ============ Esports ============ */
.match-live{padding:1.6rem}
.match-top{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.live-badge{display:inline-flex;align-items:center;gap:.5rem;font:700 .64rem var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text);border:1px solid rgba(255,77,94,.5);padding:.35rem .7rem}
.match-game{font:400 .68rem var(--font-mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.match-viewers{margin-left:auto;font:400 .68rem var(--font-mono);color:var(--muted);display:flex;align-items:center;gap:.45rem}
.match-viewers b{color:var(--text)}
.match-main{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.team{display:flex;align-items:center;gap:.95rem;flex:1;min-width:210px}
.team img{width:58px;height:58px;object-fit:cover;border:1px solid var(--line-2)}
.team strong{font-family:var(--font-display);font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;display:block;line-height:1.2}
.team small{font:400 .6rem var(--font-mono);color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.team.right{flex-direction:row-reverse;text-align:right}
.score{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.7rem);color:var(--accent);display:flex;align-items:baseline;gap:.55rem}
.score span{color:var(--muted);font-size:.55em}
.match-map{display:flex;align-items:center;gap:1.1rem;margin:1.5rem 0;flex-wrap:wrap}
.map-chip{font:700 .64rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-2);padding:.35rem .65rem}
.map-bar{flex:1;min-width:130px;height:6px;background:rgba(255,255,255,.08);position:relative}
.map-bar i{position:absolute;top:0;bottom:0;left:0;width:58%;background:var(--accent)}
.map-score{font:400 .68rem var(--font-mono);color:var(--muted)}
.map-score b{color:var(--accent)}
.match-ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.esports-duo{display:grid;grid-template-columns:1.15fr 1fr;gap:1.4rem;margin-top:1.4rem}
.panel-card{background:var(--panel);border:1px solid var(--line);padding:1.4rem}
.panel-title{font-family:var(--font-display);font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.panel-title a{font:500 .62rem var(--font-mono);letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.up-list li{display:flex;align-items:center;gap:1.1rem;padding:.9rem 0}
.up-list li + li{border-top:1px solid var(--line)}
.up-time{font:700 .66rem var(--font-mono);color:var(--accent);width:88px;flex-shrink:0;line-height:1.5;letter-spacing:.06em}
.up-time small{display:block;color:var(--muted);font-weight:400}
.up-teams{flex:1;min-width:0}
.up-teams strong{font-size:.88rem;font-weight:600}
.up-teams span{display:block;font:400 .62rem var(--font-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem}
.up-list .icon{color:var(--muted)}
.table-scroll{overflow-x:auto}
.standings{width:100%;border-collapse:collapse;min-width:280px}
.standings th{font:700 .6rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.55rem .45rem;border-bottom:1px solid var(--line-2)}
.standings td{padding:.68rem .45rem;border-bottom:1px solid var(--line);font-size:.84rem}
.standings tbody tr:last-child td{border-bottom:0}
.standings .pos{font:700 .72rem var(--font-mono);color:var(--muted)}
.standings .tm{font-family:var(--font-display);font-weight:600;font-size:.84rem;letter-spacing:.03em}
.standings .num{font:500 .78rem var(--font-mono);color:var(--muted)}
.standings tr.lead td{background:rgba(200,245,66,.06)}
.standings tr.lead .tm{color:var(--accent)}

/* ============ Streaming ============ */
.row-nav{display:flex;gap:.5rem}
.stream-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,23vw,295px);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.7rem;scrollbar-width:thin}
.stream-card{scroll-snap-align:start;overflow:hidden;display:block}
.stream-thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.stream-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s}
.stream-card:hover .stream-thumb img{transform:scale(1.06)}
.stream-thumb .live-badge{position:absolute;top:.6rem;left:.6rem;background:rgba(8,9,10,.85);border-color:transparent;font-size:.58rem;padding:.28rem .55rem}
.stream-viewers{position:absolute;bottom:.6rem;right:.6rem;background:rgba(8,9,10,.85);font:700 .62rem var(--font-mono);padding:.3rem .55rem;display:flex;align-items:center;gap:.4rem}
.stream-meta{display:flex;gap:.75rem;padding:.85rem .95rem;align-items:center}
.stream-meta img{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);flex-shrink:0}
.stream-meta strong{font-size:.78rem;display:block;color:var(--accent)}
.stream-meta .st{font-size:.8rem;color:var(--text);display:block;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.stream-meta .sg{font:400 .58rem var(--font-mono);color:var(--muted);letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:.1rem}

/* ============ Reviews ============ */
.review-feature{display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden}
.rf-media{position:relative;min-height:330px}
.rf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.score-badge{position:absolute;top:1.1rem;right:1.1rem;background:var(--accent);color:#0B0C0E;font-family:var(--font-display);font-weight:700;font-size:1.5rem;padding:.5rem .85rem;line-height:1}
.score-badge small{font-size:.68rem;font-weight:600}
.rf-body{padding:1.7rem;display:flex;flex-direction:column;gap:.85rem}
.rf-body h3{font-family:var(--font-display);font-weight:700;font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.rf-body > p{color:var(--muted);font-size:.94rem}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:.3rem}
.pros-cons h5{font:700 .6rem var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.pros-cons li{display:flex;gap:.55rem;font-size:.82rem;color:var(--muted);padding:.28rem 0;line-height:1.5}
.pros-cons .icon{margin-top:4px;flex-shrink:0;font-size:.8rem}
.pros .icon{color:var(--accent)}
 cons .icon{color:var(--red)}
.rf-foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.review-list{margin-top:1.4rem;border:1px solid var(--line);background:var(--panel)}
.review-row{display:flex;gap:1.2rem;align-items:center;padding:1rem 1.25rem;transition:background .2s}
.review-row + .review-row{border-top:1px solid var(--line)}
.review-row:hover{background:var(--panel-2)}
.rr-thumb{width:150px;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);flex-shrink:0;filter:saturate(.85)}
.rr-body{flex:1;min-width:0}
.rr-body h4{font-family:var(--font-display);font-weight:600;font-size:.98rem;margin:.35rem 0 .2rem}
.rr-body p{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-score{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--accent);border:1px solid rgba(200,245,66,.4);padding:.45rem .7rem;flex-shrink:0;line-height:1}
.rr-score small{font-size:.6rem;color:var(--muted);font-weight:500}

/* ============ FPS Lab ============ */
.lab-panel{background:#0D0F12;border:1px solid var(--line-2);padding:clamp(1.5rem,3.4vw,2.7rem);position:relative}
.lab-panel::before,.lab-panel::after{content:"";position:absolute;width:46px;height:46px;pointer-events:none}
.lab-panel::before{top:-8px;left:-8px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.lab-panel::after{bottom:-8px;right:-8px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
.lab-head{max-width:740px;margin-bottom:2rem}
.lab-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.55rem,2.8vw,2.15rem);text-transform:uppercase;line-height:1.08;margin:.7rem 0 .8rem}
.lab-head p{color:var(--muted);font-size:.96rem}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.lab-box{border:1px solid var(--line);background:#0A0B0D;padding:1.15rem}
.lab-box-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.lab-tag{font:500 .64rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lab-tag b{color:var(--accent);font-weight:700}
.lab-readout{font:400 .64rem var(--font-mono);color:var(--muted);display:flex;gap:1.1rem;flex-wrap:wrap}
.lab-readout b{color:var(--text);font-weight:500}
.lab-box canvas{width:100%;height:220px;display:block}
.lab-controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.lab-btn{font:500 .72rem var(--font-mono);padding:.55rem .9rem;background:transparent;border:1px solid var(--line-2);color:var(--muted);transition:all .2s}
.lab-btn:hover{border-color:var(--accent);color:var(--accent)}
.lab-btn.active{background:var(--accent);border-color:var(--accent);color:#0B0C0E;font-weight:700}
.lab-verdict{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line);font:400 .8rem var(--font-mono);color:var(--text);display:flex;gap:.65rem;line-height:1.6}
.lab-verdict::before{content:"▸";color:var(--accent);font-weight:700}
.lab-hint{display:none;margin-top:.9rem;font:400 .68rem var(--font-mono);color:var(--accent);line-height:1.6}
.lab-hint.show{display:block}
.lab-hint b{font-weight:700}
.lab-note{margin-top:1.5rem;padding-top:1.1rem;border-top:1px dashed var(--line-2);font:400 .64rem var(--font-mono);color:var(--muted);line-height:1.7;max-width:90ch}

/* ============ Hardware ============ */
.hardware-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4rem;align-items:start}
.gear-feature{overflow:hidden;display:flex;flex-direction:column}
.gear-feature .gf-media{aspect-ratio:16/9;overflow:hidden}
.gear-feature .gf-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);transition:transform .6s}
.gear-feature:hover .gf-media img{transform:scale(1.04)}
.gear-list{display:flex;flex-direction:column;gap:1rem}
.gear-row{display:flex;gap:1.1rem;padding:1rem;align-items:center}
.gear-row .ch-media{width:122px;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;border:1px solid var(--line)}
.gear-row .ch-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s}
.gear-row:hover .ch-media img{transform:scale(1.07)}
.gear-row .ch-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.gear-row .gr-top{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.gear-row h4{font-family:var(--font-display);font-weight:600;font-size:.95rem}
.gear-price{font:700 .78rem var(--font-mono);color:var(--accent);flex-shrink:0}
.gear-row p{font-size:.78rem;color:var(--muted)}
.gear-row .section-link{font-size:.62rem}
.hardware-more{margin-top:1.6rem}

/* ============ Community ============ */
.community-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:2.6rem;align-items:start}
.community-copy p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.comm-stats{display:flex;gap:2rem;margin:1.5rem 0;flex-wrap:wrap}
.comm-stats strong{font-family:var(--font-display);font-weight:700;font-size:1.45rem;color:var(--accent);display:block;line-height:1}
.comm-stats span{font:400 .6rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.35rem}
.avatar-row{display:flex;align-items:center;margin:0 0 1.6rem}
.avatar-row img{width:42px;height:42px;border-radius:50%;border:2px solid var(--bg);margin-left:-10px}
.avatar-row img:first-child{margin-left:0}
.avatar-row span{font:400 .66rem var(--font-mono);color:var(--muted);margin-left:.9rem;letter-spacing:.06em}
.comm-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.quotes{display:flex;flex-direction:column;gap:1rem}
.quote{padding:1.35rem;position:relative;margin:0}
.quote p{font-size:.92rem;line-height:1.7;color:var(--text)}
.quote p::before{content:"“";font-family:var(--font-display);font-size:2.2rem;color:var(--accent);position:absolute;top:.35rem;right:1.1rem;line-height:1;opacity:.9}
.quote footer{display:flex;align-items:center;gap:.75rem;margin-top:1.05rem}
.quote footer img{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2)}
.quote footer strong{font-size:.82rem;display:block}
.quote footer span{font:400 .62rem var(--font-mono);color:var(--muted);letter-spacing:.06em}
.quote-accent{border-left:3px solid var(--accent)}
.community-strip{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--panel)}
.strip-item{display:flex;gap:1rem;padding:1.25rem 1.3rem;align-items:flex-start}
.strip-item + .strip-item{border-left:1px solid var(--line)}
.strip-icon{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border:1px solid rgba(200,245,66,.4);color:var(--accent);font-size:1.05rem}
.strip-item strong{font-family:var(--font-display);font-weight:600;font-size:.95rem;display:block;line-height:1.3}
.strip-item span{font-size:.78rem;color:var(--muted);line-height:1.55;display:block;margin-top:.15rem}

/* ============ FAQ ============ */
.faq-grid{display:grid;grid-template-columns:340px 1fr;gap:2.6rem;align-items:start}
.faq-copy p{color:var(--muted);font-size:.94rem;margin-top:1rem}
.support-card{margin-top:1.5rem;border:1px solid var(--line);background:var(--panel);padding:1.25rem}
.support-card .sc-row{display:flex;justify-content:space-between;font:400 .68rem var(--font-mono);color:var(--muted);padding:.5rem 0;border-bottom:1px solid var(--line);letter-spacing:.06em}
.support-card .sc-row b{color:var(--text);font-weight:500}
.support-card .btn{margin-top:1.1rem;width:100%;justify-content:center}
.faq-list{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.2rem .15rem;background:none;border:0;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:.97rem;letter-spacing:.04em;text-transform:uppercase;text-align:left;transition:color .2s}
.faq-q:hover{color:var(--accent)}
.faq-q .icon{color:var(--accent);flex-shrink:0;transition:transform .3s;font-size:.9rem}
.faq-item.open .faq-q .icon{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 .15rem 1.25rem;color:var(--muted);font-size:.92rem;max-width:64ch}

/* ============ Newsletter ============ */
.newsletter{background:var(--accent);color:#0B0C0E;padding:3.8rem 0}
.newsletter-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:2.8rem;align-items:center}
.nl-kicker{font:700 .68rem var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(11,12,14,.65)}
.newsletter h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);text-transform:uppercase;line-height:1.05;margin:.55rem 0 .65rem}
.nl-copy p{color:rgba(11,12,14,.78);max-width:48ch;font-size:.95rem}
.nl-row{display:flex;gap:.7rem}
.nl-row input{flex:1;min-width:0;background:#0B0C0E;border:1px solid #0B0C0E;color:var(--text);font:500 .9rem var(--font-body);padding:.9rem 1.05rem;outline:none}
.nl-row input::placeholder{color:rgba(233,236,228,.4)}
.nl-row input:focus-visible{outline:2px solid #0B0C0E;outline-offset:2px}
.nl-err{font:700 .72rem var(--font-mono);color:#7E0F2C;min-height:1.2em;margin-top:.55rem}
.nl-small{font:400 .64rem var(--font-mono);color:rgba(11,12,14,.6);letter-spacing:.06em}
.shake{animation:shake .4s ease}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ============ Footer ============ */
.site-footer{background:#08090B;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.35fr;gap:2.4rem;padding:3.5rem 0 2.7rem}
.f-brand .brand{margin-bottom:1rem}
.f-blurb{color:var(--muted);font-size:.85rem;max-width:34ch;margin-bottom:1.2rem}
.socials{display:flex;gap:.6rem}
.socials a{width:37px;height:37px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--muted);font-size:.95rem;transition:all .2s}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:#0B0C0E}
.f-col h4{font:700 .64rem var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.f-col ul li{margin-bottom:.6rem}
.f-col ul a{font-size:.85rem;color:var(--text);opacity:.85;transition:all .2s}
.f-col ul a:hover{opacity:1;color:var(--accent)}
.f-contact li{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--text);opacity:.85}
.f-contact .icon{color:var(--accent);margin-top:4px;flex-shrink:0}
.footer-bottom{border-top:1px solid var(--line);padding:1.25rem 0}
.fb-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font:400 .64rem var(--font-mono);color:var(--muted);letter-spacing:.06em}
.fb-links{display:flex;gap:1.4rem}
.fb-links a:hover{color:var(--accent)}

/* ============ Toast & reveal ============ */
.toast-stack{position:fixed;right:1.2rem;bottom:1.2rem;z-index:200;display:flex;flex-direction:column;gap:.6rem;max-width:min(370px,calc(100vw - 2.4rem))}
.toast{display:flex;gap:.7rem;align-items:flex-start;background:#14161A;border:1px solid var(--line-2);border-left:3px solid var(--accent);padding:.9rem 1.05rem;font-size:.82rem;line-height:1.5;color:var(--text);box-shadow:0 14px 36px rgba(0,0,0,.55);transform:translateY(14px);opacity:0;transition:all .3s ease}
.toast.show{transform:none;opacity:1}
.toast .icon{color:var(--accent);margin-top:3px;flex-shrink:0}
.toast.error{border-left-color:var(--red)}
.toast.error .icon{color:var(--red)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}

/* ============ Responsive ============ */
@media (max-width:1060px){
  .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .hero-stat{left:14px}
  .news-layout{grid-template-columns:1fr}
  .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
  .widget + .widget{margin-top:0}
  .esports-duo{grid-template-columns:1fr}
  .review-feature{grid-template-columns:1fr}
  .rf-media{min-height:280px}
  .hardware-grid{grid-template-columns:1fr}
  .community-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .newsletter-inner{grid-template-columns:1fr;gap:1.8rem}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  .main-nav{position:absolute;top:100%;left:0;right:0;background:rgba(11,12,14,.98);backdrop-filter:blur(14px);flex-direction:column;gap:0;padding:.6rem 24px 1.3rem;display:none;border-bottom:1px solid var(--line);margin-left:0}
  .main-nav.open{display:flex}
  .main-nav a{padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.8rem}
  .main-nav a::after{display:none}
  .nav-toggle{display:inline-flex}
  .brand-text small{display:none}
}
@media (max-width:680px){
  .container{padding:0 18px}
  .section{padding:3.2rem 0}
  .hero{padding:3rem 0 2.6rem}
  .news-mosaic{grid-template-columns:1fr}
  .card-feature{grid-row:auto}
  .mosaic-duo{grid-template-columns:1fr}
  .sidebar{grid-template-columns:1fr}
  .widget + .widget{margin-top:1.4rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:1.3rem 1.2rem}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .lab-grid{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .community-strip{grid-template-columns:1fr}
  .strip-item + .strip-item{border-left:0;border-top:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .search-box{display:none}
  .hero-stat{position:static;display:inline-block;margin-top:1rem;box-shadow:none}
  .hero-media::before,.hero-media::after{display:none}
  .rr-thumb{width:104px}
  .rr-body p{display:none}
  .team{min-width:150px}
  .team img{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
</style>
</head>
<body>

<!-- SVG icon sprite -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></symbol>
  <symbol id="i-menu" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></symbol>
  <symbol id="i-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
  <symbol id="i-arrow-right" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
  <symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M19 12H5M11 6l-6 6 6 6"/></symbol>
  <symbol id="i-play" viewBox="0 0 24 24"><path d="M7 4.5l13 7.5-13 7.5z"/></symbol>
  <symbol id="i-eye" viewBox="0 0 24 24"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></symbol>
  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
  <symbol id="i-check" viewBox="0 0 24 24"><path d="M4 12.5l5 5L20 6.5"/></symbol>
  <symbol id="i-cross" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
  <symbol id="i-chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
  <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></symbol>
  <symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></symbol>
  <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></symbol>
  <symbol id="i-phone" viewBox="0 0 24 24"><path d="M5 4h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></symbol>
  <symbol id="i-trophy" viewBox="0 0 24 24"><path d="M8 4h8v5a4 4 0 0 1-8 0V4z"/><path d="M8 5H5a3 3 0 0 0 3 3M16 5h3a3 3 0 0 1-3 3"/><path d="M12 13v4M8 20h8M9.5 17h5"/></symbol>
  <symbol id="i-camera" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8.5 7L10 4.5h4L15.5 7"/><circle cx="12" cy="13" r="3.5"/></symbol>
  <symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20.5s-8-4.8-8-10a4.5 4.5 0 0 1 8-2.8 4.5 4.5 0 0 1 8 2.8c0 5.2-8 10-8 10z"/></symbol>
  <symbol id="i-discord" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.865-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.058a.082.082 0 0 0 .031.056 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.291.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></symbol>
  <symbol id="i-x" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></symbol>
  <symbol id="i-youtube" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" fill-rule="evenodd" d="M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.28 5 12 5 12 5s-6.28 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26.2 26.2 0 0 0 2 12a26.2 26.2 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.72 19 12 19 12 19s6.28 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26.2 26.2 0 0 0 22 12a26.2 26.2 0 0 0-.4-4.8zM10 15.2V8.8l5.5 3.2z"/></symbol>
  <symbol id="i-twitch" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></symbol>
</svg>

<a class="skip-link" href="#news">Skip to content</a>

<!-- Live ticker -->
<div class="ticker" aria-label="Live news ticker">
  <div class="ticker-label"><span class="dot"></span>Live</div>
  <div class="ticker-viewport">
    <div class="ticker-track">
      <div class="ticker-set">
        <span class="tick-item"><span class="live-flag">LIVE</span> Worlds 2025 Grand Final — Nexus Esports 2–1 Aether Blaze</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Patch 14.8</strong> drops today — full notes inside</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Speedrun</strong> — Elden Ring Any% falls to 12:41</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>New review</strong> — Stellar Drift scores 9.2/10</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Transfer</strong> — Kael to Team Vertex, 2-year deal</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Community night</strong> — Friday 8PM CET, all welcome</span><span class="tick-sep">//</span>
      </div>
      <div class="ticker-set" aria-hidden="true">
        <span class="tick-item"><span class="live-flag">LIVE</span> Worlds 2025 Grand Final — Nexus Esports 2–1 Aether Blaze</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Patch 14.8</strong> drops today — full notes inside</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Speedrun</strong> — Elden Ring Any% falls to 12:41</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>New review</strong> — Stellar Drift scores 9.2/10</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Transfer</strong> — Kael to Team Vertex, 2-year deal</span><span class="tick-sep">//</span>
        <span class="tick-item"><strong>Community night</strong> — Friday 8PM CET, all welcome</span><span class="tick-sep">//</span>
      </div>
    </div>
  </div>
</div>

<!-- Header -->
<header class="site-header" id="siteHeader">
  <div class="container header-inner">
    <a class="brand" href="#home" aria-label="Spawnpoint home">
      <img src="https://placehold.co/88x88/C8F542/0B0C0E?text=SP&amp;font=montserrat" alt="Spawnpoint logo" width="44" height="44">
      <span class="brand-text"><strong>Spawnpoint</strong><small>Your daily respawn in gaming</small></span>
    </a>
    <nav class="main-nav" id="mainNav" aria-label="Primary">
      <a href="#news">News</a>
      <a href="#esports">Esports</a>
      <a href="#streaming">Streaming</a>
      <a href="#reviews">Reviews</a>
      <a href="#hardware">Hardware</a>
      <a href="#community">Community</a>
      <a href="#support">Support</a>
    </nav>
    <div class="header-actions">
      <div class="search-box" id="searchBox">
        <input type="search" id="searchInput" placeholder="Search news, reviews, games…" aria-label="Search Spawnpoint">
        <button class="icon-btn" id="searchBtn" aria-label="Search"><svg class="icon"><use href="#i-search"/></svg></button>
      </div>
      <a href="#" class="btn btn-primary btn-sm js-discord"><svg class="icon icon-fill"><use href="#i-discord"/></svg>Join Discord</a>
      <button class="icon-btn nav-toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false">
        <svg class="icon i-menu"><use href="#i-menu"/></svg>
        <svg class="icon i-close"><use href="#i-close"/></svg>
      </button>
    </div>
  </div>
</header>

<main>
  <!-- Hero -->
  <section class="hero" id="home">
    <div class="container hero-grid">
      <div class="reveal in">
        <span class="chip">Cover Story</span>
        <span class="kicker" style="margin-top:.9rem">Esports · Worlds 2025</span>
        <h1>Eight million watched. <em>One moment</em> decided everything.</h1>
        <p class="hero-dek">The Worlds 2025 grand final went the full distance — three maps, a reverse sweep, and a round-37 play that broke the internet. Our desk was in Seoul for all of it. Here's how a wildcard run became a dynasty, and what it means for the 2026 season.</p>
        <div class="hero-meta">
          <img src="https://i.pravatar.cc/64?u=mara-chen" alt="Mara Chen">
          <span>By <b>Mara Chen</b> · Senior Esports Editor</span>
          <span class="sep">/</span>
          <span><svg class="icon"><use href="#i-clock"/></svg> 12 min read</span>
          <span class="sep">/</span>
          <span>Dec 4, 2025</span>
        </div>
        <div class="hero-ctas">
          <a href="#" class="btn btn-primary" data-demo>Read the cover story<svg class="icon"><use href="#i-arrow-right"/></svg></a>
          <a href="#" class="btn btn-ghost" data-demo><svg class="icon icon-fill"><use href="#i-play"/></svg>Watch the highlights</a>
        </div>
      </div>
      <figure class="hero-media reveal in">
        <img src="https://picsum.photos/seed/spawn-hero/880/620" alt="Nexus Esports lifting the Worlds 2025 trophy on stage in Seoul" width="880" height="620">
        <figcaption>Worlds 2025 Grand Final — Seoul. Credit: Spawnpoint Esports Desk</figcaption>
        <div class="hero-stat">
          <strong>8.1M</strong>
          <span>peak concurrent viewers<br>+34% vs. last year</span>
        </div>
      </figure>
    </div>
  </section>

  <!-- Stats strip -->
  <section class="stats-strip" aria-label="Spawnpoint in numbers">
    <div class="container stats-grid">
      <div class="stat"><strong class="stat-num" data-count="2.4" data-suffix="M">0</strong><span>Community members</span></div>
      <div class="stat"><strong class="stat-num" data-count="1240">0</strong><span>Articles &amp; guides published</span></div>
      <div class="stat"><strong class="stat-num" data-count="96">0</strong><span>Games reviewed</span></div>
      <div class="stat"><strong class="stat-num" data-count="72">0</strong><span>Esports events covered</span></div>
    </div>
  </section>

  <!-- News + Sidebar -->
  <section class="section" id="news">
    <div class="container news-layout">
      <div>
        <div class="section-head reveal">
          <div><span class="kicker">// Fresh off the press</span><h2 class="section-title"><span class="slash">//</span>Latest News</h2></div>
          <a href="#" class="section-link" data-demo>All news<svg class="icon"><use href="#i-arrow-right"/></svg></a>
        </div>
        <div class="news-mosaic">
          <a href="#" class="card card-feature reveal" data-demo>
            <div class="nf-media"><img src="https://picsum.photos/seed/sp-news-patch/840/540" alt="Abstract artwork representing a game patch update" loading="lazy"></div>
            <div class="card-body">
              <span class="chip">Patch Notes</span>
              <h3>Patch 14.8 rewrites the meta — what changed, what broke, and what to abuse before it's fixed</h3>
              <p>The devs called it a "mid-season shake-up." We call it the biggest meta shift since launch. We spent 48 hours on the test server — here's what actually matters, from the new movement tech to the weapon tuning nobody is talking about yet.</p>
              <span class="meta"><svg class="icon"><use href="#i-clock"/></svg>By <b>Dev Patel</b> · 6 min read · 2h ago</span>
            </div>
          </a>
          <a href="#" class="card card-h reveal" data-demo>
            <div class="ch-media"><img src="https://picsum.photos/seed/sp-news-mouse/400/300" alt="Gaming mouse on a desk" loading="lazy"></div>
            <div class="ch-body">
              <span class="chip chip-plain">Hardware</span>
              <h4>We tested nine gaming mice under $80 — one embarrassed the flagships</h4>
              <span class="meta">By <b>Priya Raman</b> · 9 min · 5h ago</span>
            </div>
          </a>
          <a href="#" class="card card-h reveal" data-demo>
            <div class="ch-media"><img src="https://picsum.photos/seed/sp-news-transfer/400/300" alt="Esports team huddle" loading="lazy"></div>
            <div class="ch-body">
              <span class="chip chip-plain">Esports</span>
              <h4>Transfer window: the five moves that will reshape the 2026 season</h4>
              <span class="meta">By <b>Mara Chen</b> · 4 min · 8h ago</span>
            </div>
          </a>
          <div class="mosaic-duo">
            <a href="#" class="card card-h reveal" data-demo>
              <div class="ch-media"><img src="https://picsum.photos/seed/sp-news-aim/400/300" alt="Keyboard and mouse setup" loading="lazy"></div>
              <div class="ch-body">
                <span class="chip chip-plain">Guides</span>
                <h4>The 20-minute aim routine used by tier-one pros (no Aim Lab required)</h4>
                <span class="meta">By <b>Jonas Feld</b> · 7 min · Yesterday</span>
              </div>
            </a>
            <a href="#" class="card card-h reveal" data-demo>
              <div class="ch-media"><img src="https://picsum.photos/seed/sp-news-cross/400/300" alt="Multiple gaming devices side by side" loading="lazy"></div>
              <div class="ch-body">
                <span class="chip chip-plain">Industry</span>
                <h4>Cross-play, cross-progression, cross-everything: 2025 was the year the walls came down</h4>
                <span class="meta">By <b>Lena Ortiz</b> · 6 min · Yesterday</span>
              </div>
            </a>
          </div>
        </div>
      </div>

      <aside class="sidebar" aria-label="Sidebar">
        <div class="widget reveal">
          <h3 class="widget-title">Trending Games <a href="#" data-demo>View all</a></h3>
          <ol class="trend-list">
            <li><span class="trend-rank">01</span><img src="https://picsum.photos/seed/sp-game-1/96/96" alt="" loading="lazy"><div class="trend-info"><strong>Stellar Drift</strong><span>412K online</span></div><span class="trend-up">▲ 12%</span></li>
            <li><span class="trend-rank">02</span><img src="https://picsum.photos/seed/sp-game-2/96/96" alt="" loading="lazy"><div class="trend-info"><strong>Ironclad Tactics II</strong><span>268K online</span></div><span class="trend-up">▲ 4%</span></li>
            <li><span class="trend-rank">03</span><img src="https://picsum.photos/seed/sp-game-3/96/96" alt="" loading="lazy"><div class="trend-info"><strong>Night City Rally</strong><span>191K online</span></div><span class="trend-down">▼ 2%</span></li>
            <li><span class="trend-rank">04</span><img src="https://picsum.photos/seed/sp-game-4/96/96" alt="" loading="lazy"><div class="trend-info"><strong>Aetherfall</strong><span>154K online</span></div><span class="trend-up">▲ 31%</span></li>
            <li><span class="trend-rank">05</span><img src="https://picsum.photos/seed/sp-game-5/96/96" alt="" loading="lazy"><div class="trend-info"><strong>Mech Legacy</strong><span>98K online</span></div><span class="trend-up">▲ 7%</span></li>
          </ol>
        </div>
        <div class="widget reveal">
          <h3 class="widget-title">Patch Notes <a href="#" data-demo>Archive</a></h3>
          <ul class="patch-list">
            <li><span class="patch-ver">v2.14.1</span><strong>Ranked reset &amp; placement matches explained</strong><time>1h ago</time></li>
            <li><span class="patch-ver">v5.0.3</span><strong>New operator "Warden" — abilities and combos</strong><time>5h ago</time></li>
            <li><span class="patch-ver">HOTFIX</span><strong>Cross-platform desync issues resolved</strong><time>Yesterday</time></li>
          </ul>
        </div>
        <div class="widget reveal">
          <h3 class="widget-title">Live on Spawnpoint <a href="#streaming">Watch</a></h3>
          <ul class="mini-streams">
            <li><img src="https://i.pravatar.cc/72?u=nova" alt="" loading="lazy"><div><strong>@nova_fps</strong><span>Stellar Drift · Ranked grind</span></div><span class="mini-viewers"><i class="dot dot-red"></i><span class="js-viewers" data-base="12400">12.4K</span></span></li>
            <li><img src="https://i.pravatar.cc/72?u=cory" alt="" loading="lazy"><div><strong>@cozycory</strong><span>Aetherfall · Slow village building</span></div><span class="mini-viewers"><i class="dot dot-red"></i><span class="js-viewers" data-base="8100">8.1K</span></span></li>
          </ul>
          <a href="#streaming" class="widget-link">All live channels<svg class="icon"><use href="#i-arrow-right"/></svg></a>
        </div>
      </aside>
    </div>
  </section>

  <!-- Esports -->
  <section class="section section-panel" id="esports">
    <div class="container">
      <div class="section-head reveal">
        <div><span class="kicker">// Scores, schedules, standings</span><h2 class="section-title"><span class="slash">//</span>Esports</h2></div>
        <a href="#" class="section-link" data-demo>Full schedule<svg class="icon"><use href="#i-arrow-right"/></svg></a>
      </div>
      <p class="section-lead reveal">Live scores, upcoming fixtures and standings from the biggest stages in competitive gaming — updated in real time by our desk, from group stages to grand finals.</p>

      <div class="card match-live reveal">
        <div class="match-top">
          <span class="live-badge"><span class="dot dot-red"></span>Live</span>
          <span class="match-game">Worlds 2025 · Group Stage · Best of 3</span>
          <span class="match-viewers"><svg class="icon"><use href="#i-eye"/></svg><b class="js-viewers" data-base="412000">412K</b>&nbsp;watching</span>
        </div>
        <div class="match-main">
          <div class="team">
            <img src="https://placehold.co/116x116/16181D/C8F542?text=NX&amp;font=montserrat" alt="Nexus Esports logo">
            <div><strong>Nexus Esports</strong><small>Seed #1 · Korea</small></div>
          </div>
          <div class="score">2<span>:</span>1</div>
          <div class="team right">
            <img src="https://placehold.co/116x116/16181D/FF4D8D?text=AB&amp;font=montserrat" alt="Aether Blaze logo">
            <div><strong>Aether Blaze</strong><small>Seed #3 · Brazil</small></div>
          </div>
        </div>
        <div class="match-map">
          <span class="map-chip">Map 3 · Mirage</span>
          <div class="map-bar" role="img" aria-label="Nexus leading 58 percent of rounds"><i></i></div>
          <span class="map-score">Round 21 — <b>Nexus 9 : 8</b></span>
        </div>
        <div class="match-ctas">
          <a href="#" class="btn btn-primary" data-demo><svg class="icon icon-fill"><use href="#i-play"/></svg>Watch live</a>
          <a href="#" class="btn btn-ghost" data-demo>Match page</a>
        </div>
      </div>

      <div class="esports-duo">
        <div class="panel-card reveal">
          <h3 class="panel-title">Upcoming Matches <a href="#" data-demo>Full schedule</a></h3>
          <ul class="up-list">
            <li>
              <span class="up-time">FRI 20:00<small>CET</small></span>
              <div class="up-teams"><strong>Vertex Gaming vs Iron Wolves</strong><span>Champions League S4 · Group B</span></div>
              <svg class="icon"><use href="#i-chevron"/></svg>
            </li>
            <li>
              <span class="up-time">SAT 17:00<small>CET</small></span>
              <div class="up-teams"><strong>Kael Esports vs Nova Union</strong><span>Challengers Cup · Quarterfinal</span></div>
              <svg class="icon"><use href="#i-chevron"/></svg>
            </li>
            <li>
              <span class="up-time">SUN 19:00<small>CET</small></span>
              <div class="up-teams"><strong>Aether Blaze vs Redshift</strong><span>Worlds 2025 · Semifinal</span></div>
              <svg class="icon"><use href="#i-chevron"/></svg>
            </li>
          </ul>
        </div>
        <div class="panel-card reveal">
          <h3 class="panel-title">Standings <a href="#" data-demo>Full table</a></h3>
          <div class="table-scroll">
            <table class="standings">
              <thead><tr><th>#</th><th>Team</th><th>W–L</th><th>Pts</th></tr></thead>
              <tbody>
                <tr class="lead"><td class="pos">1</td><td class="tm">Nexus Esports</td><td class="num">5–1</td><td class="num">15</td></tr>
                <tr><td class="pos">2</td><td class="tm">Aether Blaze</td><td class="num">4–2</td><td class="num">12</td></tr>
                <tr><td class="pos">3</td><td class="tm">Vertex Gaming</td><td class="num">4–2</td><td class="num">12</td></tr>
                <tr><td class="pos">4</td><td class="tm">Nova Union</td><td class="num">3–3</td><td class="num">9</td></tr>
                <tr><td class="pos">5</td><td class="tm">Iron Wolves</td><td class="num">2–4</td><td class="num">6</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Streaming -->
  <section class="section" id="streaming">
    <div class="container">
      <div class="section-head reveal">
        <div><span class="kicker">// Live channels</span><h2 class="section-title"><span class="slash">//</span>On Air Now</h2></div>
        <div class="row-nav">
          <button class="icon-btn" id="streamPrev" aria-label="Scroll streams left"><svg class="icon"><use href="#i-arrow-left"/></svg></button>
          <button class="icon-btn" id="streamNext" aria-label="Scroll streams right"><svg class="icon"><use href="#i-arrow-right"/></svg></button>
        </div>
      </div>
      <p class="section-lead reveal">When the servers are quiet, the streams aren't. The best channels live right now, hand-picked by our editors — from ranked grinds to speedrun attempts and community watch parties.</p>
      <div class="stream-row reveal" id="streamRow">
        <a href="#" class="card stream-card" data-demo>
          <div class="stream-thumb"><img src="https://picsum.photos/seed/sp-stream-1/480/270" alt="" loading="lazy"><span class="live-badge"><span class="dot dot-red"></span>Live</span><span class="stream-viewers"><svg class="icon"><use href="#i-eye"/></svg><span class="js-viewers" data-base="12400">12.4K</span></span></div>
          <div class="stream-meta"><img src="https://i.pravatar.cc/72?u=nova" alt="" loading="lazy"><div><strong>@nova_fps</strong><span class="st">Ranked grind to Radiant — day 34</span><span class="sg">Stellar Drift</span></div></div>
        </a>
        <a href="#" class="card stream-card" data-demo>
          <div class="stream-thumb"><img src="https://picsum.photos/seed/sp-stream-4/480/270" alt="" loading="lazy"><span class="live-badge"><span class="dot dot-red"></span>Live</span><span class="stream-viewers"><svg class="icon"><use href="#i-eye"/></svg><span class="js-viewers" data-base="22900">22.9K</span></span></div>
          <div class="stream-meta"><img src="https://i.pravatar.cc/72?u=spawnpoint" alt="" loading="lazy"><div><strong>@spawnpoint</strong><span class="st">Worlds watchparty with the crew</span><span class="sg">Just Chatting</span></div></div>
        </a>
        <a href="#" class="card stream-card" data-demo>
          <div class="stream-thumb"><img src="https://picsum.photos/seed/sp-stream-2/480/270" alt="" loading="lazy"><span class="live-badge"><span class="dot dot-red"></span>Live</span><span class="stream-viewers"><svg class="icon"><use href="#i-eye"/></svg><span class="js-viewers" data-base="8100">8.1K</span></span></div>
          <div class="stream-meta"><img src="https://i.pravatar.cc/72?u=cory" alt="" loading="lazy"><div><strong>@cozycory</strong><span class="st">Slow village building, zero rush</span><span class="sg">Aetherfall</span></div></div>
        </a>
        <a href="#" class="card stream-card" data-demo>
          <div class="stream-thumb"><img src="https://picsum.photos/seed/sp-stream-3/480/270" alt="" loading="lazy"><span class="live-badge"><span class="dot dot-red"></span>Live</span><span class="stream-viewers"><svg class="icon"><use href="#i-eye"/></svg><span class="js-viewers" data-base="5600">5.6K</span></span></div>
          <div class="stream-meta"><img src="https://i.pravatar.cc/72?u=nohitdan" alt="" loading="lazy"><div><strong>@NoHitDan</strong><span class="st">Any% PB attempts — Elden Ring</span><span class="sg">Speedruns</span></div></div>
        </a>
        <a href="#" class="card stream-card" data-demo>
          <div class="stream-thumb"><img src="https://picsum.photos/seed/sp-stream-5/480/270" alt="" loading="lazy"><span class="live-badge"><span class="dot dot-red"></span>Live</span><span class="stream-viewers"><svg class="icon"><use href="#i-eye"/></svg><span class="js-viewers" data-base="3200">3.2K</span></span></div>
          <div class="stream-meta"><img src="https://i.pravatar.cc/72?u=glitch" alt="" loading="lazy"><div><strong>@glitchmoose</strong><span class="st">Modded roguelike chaos</span><span class="sg">Mech Legacy</span></div></div>
        </a>
        <a href="#" class="card stream-card" data-demo>
          <div class="stream-thumb"><img src="https://picsum.photos/seed/sp-stream-6/480/270" alt="" loading="lazy"><span class="live-badge"><span class="dot dot-red"></span>Live</span><span class="stream-viewers"><svg class="icon"><use href="#i-eye"/></svg><span class="js-viewers" data-base="1800">1.8K</span></span></div>
          <div class="stream-meta"><img src="https://i.pravatar.cc/72?u=gary24" alt="" loading="lazy"><div><strong>@24hGary</strong><span class="st">IRL: 24-hour gym stream</span><span class="sg">IRL</span></div></div>
        </a>
      </div>
    </div>
  </section>

  <!-- Reviews -->
  <section class="section section-panel" id="reviews">
    <div class="container">
      <div class="section-head reveal">
        <div><span class="kicker">// No aggregators, no averages-of-averages</span><h2 class="section-title"><span class="slash">//</span>Reviews</h2></div>
        <a href="#" class="section-link" data-demo>All reviews<svg class="icon"><use href="#i-arrow-right"/></svg></a>
      </div>
      <p class="section-lead reveal">Every score comes from a reviewer who actually finished the game — benched on real hardware, across more than one platform where it matters.</p>

      <article class="card review-feature reveal">
        <div class="rf-media">
          <img src="https://picsum.photos/seed/sp-review-stellar/760/500" alt="Stellar Drift key art" loading="lazy">
          <span class="score-badge">9.2<small>/10</small></span>
        </div>
        <div class="rf-body">
          <span class="chip">RPG · PC / PS5 / Xbox · Editor's Choice</span>
          <h3>Stellar Drift</h3>
          <p>A roguelike deck-builder that sprints. Where its peers ask you to endure, Stellar Drift asks you to commit — every run is a forty-minute argument with a very confident captain, and the combat has more depth than games three times its price. We've played sixty hours and we're still finding synergies.</p>
          <div class="pros-cons">
            <div class="pros">
              <h5>What we loved</h5>
              <ul>
                <li><svg class="icon"><use href="#i-check"/></svg>Combat rewards mastery, not luck</li>
                <li><svg class="icon"><use href="#i-check"/></svg>Cross-platform progression just works</li>
                <li><svg class="icon"><use href="#i-check"/></svg>A soundtrack that absolutely slaps</li>
              </ul>
            </div>
            <div class="cons">
              <h5>What held it back</h5>
              <ul>
                <li><svg class="icon"><use href="#i-cross"/></svg>Act III boss balance spikes hard</li>
                <li><svg class="icon"><use href="#i-cross"/></svg>Thin off-peak matchmaking queues</li>
              </ul>
            </div>
          </div>
          <div class="rf-foot">
            <span class="meta"><svg class="icon"><use href="#i-clock"/></svg>By <b>Lena Ortiz</b> · Nov 28 · 14 min read</span>
            <a href="#" class="btn btn-ghost btn-sm" data-demo>Read full review</a>
          </div>
        </div>
      </article>

      <div class="review-list reveal">
        <a href="#" class="review-row" data-demo>
          <img class="rr-thumb" src="https://picsum.photos/seed/sp-review-iron/240/160" alt="" loading="lazy">
          <div class="rr-body">
            <span class="chip chip-plain">Strategy · PC</span>
            <h4>Ironclad Tactics II</h4>
            <p>A sequel that finally trusts you to think three moves ahead.</p>
          </div>
          <span class="meta" style="margin-right:.4rem">Dec 2</span>
          <span class="rr-score">8.7<small>/10</small></span>
        </a>
        <a href="#" class="review-row" data-demo>
          <img class="rr-thumb" src="https://picsum.photos/seed/sp-review-rally/240/160" alt="" loading="lazy">
          <div class="rr-body">
            <span class="chip chip-plain">Racing · All platforms</span>
            <h4>Night City Rally</h4>
            <p>Gorgeous, chaotic, and one good patch away from greatness.</p>
          </div>
          <span class="meta" style="margin-right:.4rem">Dec 1</span>
          <span class="rr-score">7.9<small>/10</small></span>
        </a>
        <a href="#" class="review-row" data-demo>
          <img class="rr-thumb" src="https://picsum.photos/seed/sp-review-aether/240/160" alt="" loading="lazy">
          <div class="rr-body">
            <span class="chip chip-plain">Action RPG · PC / PS5</span>
            <h4>Aetherfall: Reforged</h4>
            <p>The comeback the genre didn't know it needed.</p>
          </div>
          <span class="meta" style="margin-right:.4rem">Nov 30</span>
          <span class="rr-score">8.4<small>/10</small></span>
        </a>
      </div>
    </div>
  </section>

  <!-- FPS Lab (interactive) -->
  <section class="section" id="fps-lab">
    <div class="container">
      <div class="lab-panel reveal">
        <div class="lab-head">
          <span class="kicker">// Interactive</span>
          <h2>Feel the framerate. Don't just read about it.</h2>
          <p>Spec sheets list numbers; your eyes judge smoothness. We built a tiny simulation that renders the same motion at different target framerates — watch the dot, then watch the frame-time counter. This is why players chase 144Hz, and why "it feels smoother" is a real, measurable thing.</p>
        </div>
        <div class="lab-grid">
          <div class="lab-box">
            <div class="lab-box-head">
              <span class="lab-tag">Reference — <b>60 FPS</b></span>
              <span class="lab-readout"><span>Frame time <b id="msLeft">16.7 ms</b></span><span>Measured <b id="fpsLeft">60 fps</b></span></span>
            </div>
            <canvas id="cvLeft" aria-label="Simulation of motion at 60 frames per second"></canvas>
          </div>
          <div class="lab-box">
            <div class="lab-box-head">
              <span class="lab-tag">Your pick — <b id="pickLabel">144 FPS</b></span>
              <span class="lab-readout"><span>Frame time <b id="msRight">6.9 ms</b></span><span>Measured <b id="fpsRight">144 fps</b></span></span>
            </div>
            <canvas id="cvRight" aria-label="Simulation of motion at a selectable frame rate"></canvas>
            <div class="lab-controls" id="labControls" role="group" aria-label="Select target frame rate">
              <button class="lab-btn" data-fps="30">30</button>
              <button class="lab-btn" data-fps="60">60</button>
              <button class="lab-btn" data-fps="75">75</button>
              <button class="lab-btn" data-fps="120">120</button>
              <button class="lab-btn active" data-fps="144">144</button>
              <button class="lab-btn" data-fps="165">165</button>
              <button class="lab-btn" data-fps="240">240</button>
            </div>
          </div>
        </div>
        <p class="lab-verdict"><span id="labVerdict">The esports sweet spot. Fluid, attainable, and worth the upgrade.</span></p>
        <p class="lab-hint" id="labHint"></p>
        <p class="lab-note">Simulation runs locally in your browser using requestAnimationFrame with a simulated frame budget — no video, no tricks. On a 60Hz display, anything above 60 FPS will look identical; the frame-time readout still shows the difference. For the full effect, view this page on a 120Hz+ screen.</p>
      </div>
    </div>
  </section>

  <!-- Hardware -->
  <section class="section section-panel" id="hardware">
    <div class="container">
      <div class="section-head reveal">
        <div><span class="kicker">// Bench-tested, retail-bought</span><h2 class="section-title"><span class="slash">//</span>Hardware &amp; Gear</h2></div>
        <a href="#" class="section-link" data-demo>Browse all 96 reviews<svg class="icon"><use href="#i-arrow-right"/></svg></a>
      </div>
      <p class="section-lead reveal">We buy everything we test. No sponsored placements, no review units — every mouse, monitor and headset below was purchased at retail and benched for a minimum of two weeks before it earned a score.</p>
      <div class="hardware-grid">
        <a href="#" class="card gear-feature reveal" data-demo>
          <div class="gf-media"><img src="https://picsum.photos/seed/sp-gear-monitor/720/460" alt="High refresh rate gaming monitor on a desk" loading="lazy"></div>
          <div class="card-body">
            <span class="chip">Guide · 18 min read</span>
            <h3>The 240Hz upgrade guide: is high refresh actually worth your money?</h3>
            <p>We spent a month with three 240Hz panels and a 60Hz control to find out where the difference is real — and where it's placebo. Short answer: it depends entirely on what you play.</p>
            <span class="meta"><svg class="icon"><use href="#i-clock"/></svg>By <b>Priya Raman</b> · Dec 3 · Hardware</span>
          </div>
        </a>
        <div class="gear-list">
          <a href="#" class="card gear-row reveal" data-demo>
            <div class="ch-media"><img src="https://picsum.photos/seed/sp-gear-mouse/200/150" alt="" loading="lazy"></div>
            <div class="ch-body">
              <div class="gr-top"><h4>Vxel Viper Mini Pro</h4><span class="gear-price">$79</span></div>
              <p>The best claw-grip mouse under $100, full stop.</p>
              <span class="section-link">Read the review<svg class="icon"><use href="#i-arrow-right"/></svg></span>
            </div>
          </a>
          <a href="#" class="card gear-row reveal" data-demo>
            <div class="ch-media"><img src="https://picsum.photos/seed/sp-gear-keys/200/150" alt="" loading="lazy"></div>
            <div class="ch-body">
              <div class="gr-top"><h4>Keychron Q1 Pro (modded)</h4><span class="gear-price">$199</span></div>
              <p>A 75% board that sounds as good as it feels.</p>
              <span class="section-link">Read the review<svg class="icon"><use href="#i-arrow-right"/></svg></span>
            </div>
          </a>
          <a href="#" class="card gear-row reveal" data-demo>
            <div class="ch-media"><img src="https://picsum.photos/seed/sp-gear-headset/200/150" alt="" loading="lazy"></div>
            <div class="ch-body">
              <div class="gr-top"><h4>HyperX Cloud III</h4><span class="gear-price">$109</span></div>
              <p>The default headset recommendation, for good reason.</p>
              <span class="section-link">Read the review<svg class="icon"><use href="#i-arrow-right"/></svg></span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Community -->
  <section class="section" id="community">
    <div class="container">
      <div class="section-head reveal">
        <div><span class="kicker">// 340,000 players, one server</span><h2 class="section-title"><span class="slash">//</span>Community</h2></div>
      </div>
      <div class="community-grid">
        <div class="community-copy reveal">
          <p>Spawnpoint started in 2019 as a Discord server with 43 members and a shared hatred of lag. Today it's the loudest corner of the gaming internet — match-finding at 3AM, patch-night meltdowns, speedrun personal bests celebrated like championship goals, and a hardware channel with very strong opinions about your mouse grip.</p>
          <p>We run tournaments, screenshot contests, charity streams and the occasional LAN. No gatekeeping, no rank requirements — if you play games, you're already in.</p>
          <div class="comm-stats">
            <div><strong class="js-viewers" data-base="18412">18.4K</strong><span>Online now</span></div>
            <div><strong>96K</strong><span>Messages / day</span></div>
            <div><strong>214</strong><span>Events / year</span></div>
          </div>
          <div class="avatar-row">
            <img src="https://i.pravatar.cc/84?u=member-one" alt="" loading="lazy">
            <img src="https://i.pravatar.cc/84?u=member-two" alt="" loading="lazy">
            <img src="https://i.pravatar.cc/84?u=member-three" alt="" loading="lazy">
            <img src="https://i.pravatar.cc/84?u=member-four" alt="" loading="lazy">
            <img src="https://i.pravatar.cc/84?u=member-five" alt="" loading="lazy">
            <span>+340K members and counting</span>
          </div>
          <div class="comm-ctas">
            <a href="#" class="btn btn-primary js-discord"><svg class="icon icon-fill"><use href="#i-discord"/></svg>Join the Discord</a>
            <a href="#" class="btn btn-ghost" data-demo>Read the rules</a>
          </div>
        </div>
        <div class="quotes">
          <blockquote class="card quote reveal">
            <p>I found my ranked duo in #looking-for-group in 2021. We've played 1,400 matches together since. This place is genuinely ridiculous.</p>
            <footer>
              <img src="https://i.pravatar.cc/76?u=kestrel" alt="" loading="lazy">
              <div><strong>Maya "Kestrel" Torres</strong><span>Valorant · Immortal 2</span></div>
            </footer>
          </blockquote>
          <blockquote class="card quote quote-accent reveal">
            <p>The patch-notes threads here are faster and more accurate than the official forums. I stopped checking the official site entirely.</p>
            <footer>
              <img src="https://i.pravatar.cc/76?u=daniel-o" alt="" loading="lazy">
              <div><strong>Daniel Okafor</strong><span>Community moderator</span></div>
            </footer>
          </blockquote>
          <blockquote class="card quote reveal">
            <p>Asked a hardware question at midnight, had three working answers by breakfast. From strangers. For free.</p>
            <footer>
              <img src="https://i.pravatar.cc/76?u=priya-r" alt="" loading="lazy">
              <div><strong>Priya Raman</strong><span>Hardware channel regular</span></div>
            </footer>
          </blockquote>
        </div>
      </div>
      <div class="community-strip reveal">
        <div class="strip-item">
          <span class="strip-icon"><svg class="icon"><use href="#i-trophy"/></svg></span>
          <div><strong>12:41 — new Any% record</strong><span>Elden Ring, set by community member NoHitDan at 4AM on a Tuesday.</span></div>
        </div>
        <div class="strip-item">
          <span class="strip-icon"><svg class="icon"><use href="#i-camera"/></svg></span>
          <div><strong>2,300 screenshot entries</strong><span>Our winter contest winners are on the homepage all December.</span></div>
        </div>
        <div class="strip-item">
          <span class="strip-icon"><svg class="icon"><use href="#i-heart"/></svg></span>
          <div><strong>$48,200 raised for charity</strong><span>The community's 24-hour stream for Extra Life just wrapped.</span></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Support / FAQ -->
  <section class="section section-panel" id="support">
    <div class="container faq-grid">
      <div class="faq-copy reveal">
        <span class="kicker">// Support</span>
        <h2 class="section-title"><span class="slash">//</span>Support &amp; FAQ</h2>
        <p>Answers to the things readers ask us most. Still stuck? Our support team is staffed by actual humans who also play games on the weekend.</p>
        <div class="support-card">
          <div class="sc-row"><span>Average response time</span><b>Under 4 hours</b></div>
          <div class="sc-row"><span>Coverage</span><b>24 / 7</b></div>
          <div class="sc-row" style="border-bottom:0"><span>Languages</span><b>EN · DE · FR · ES</b></div>
          <a class="btn btn-ghost btn-sm" href="mailto:support@spawnpoint.gg"><svg class="icon"><use href="#i-mail"/></svg>Email support</a>
        </div>
      </div>
      <div class="faq-list reveal">
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">Is Spawnpoint free to use?<svg class="icon"><use href="#i-chevron"/></svg></button>
          <div class="faq-a"><p>Completely. Every article, review, guide and the Discord community cost nothing, and there is no paywalled tier. We keep the lights on with clearly-labelled sponsorships and affiliate links on hardware reviews — you'll always know when a piece is sponsored, and sponsors never see a score before you do.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">How do you test hardware?<svg class="icon"><use href="#i-chevron"/></svg></button>
          <div class="faq-a"><p>Everything we test is bought at retail with our own money — no loaner units, no NDA builds. Each product is benched for at least two weeks: synthetic benchmarks, real gameplay sessions, and a week of daily driving. If a result looks off, we buy a second unit and test again before publishing anything.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">How are review scores calculated?<svg class="icon"><use href="#i-chevron"/></svg></button>
          <div class="faq-a"><p>Games are scored 0–10 across five weighted categories: gameplay, presentation, performance, value, and "just one more." The final number is the weighted average, rounded to one decimal. A 9+ means buy it and tell your friends; below 5 means we actively recommend against it — no exceptions for big publishers.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">Can I write for Spawnpoint or send a news tip?<svg class="icon"><use href="#i-chevron"/></svg></button>
          <div class="faq-a"><p>Yes to both. We pay for freelance features, guides and esports coverage — pitch us at pitches@spawnpoint.gg. For news tips, use tips@spawnpoint.gg or the #news-desk channel in our Discord. Verified tips earn a byline credit and a thank-you in the piece.</p></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">Do you cover console and mobile gaming?<svg class="icon"><use href="#i-chevron"/></svg></button>
          <div class="faq-a"><p>All of it. Cross-platform is the default assumption of everything we cover — if a game runs on more than one screen, we test it on more than one screen. Console and mobile reviews carry the same scoring standard, the same hardware-benching rules, and the same editorial independence as everything else we publish.</p></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Newsletter -->
  <section class="newsletter" aria-label="Newsletter signup">
    <div class="container newsletter-inner">
      <div class="nl-copy">
        <span class="nl-kicker">// The Friday Drop</span>
        <h2>Never miss a patch note.</h2>
        <p>One email, every Friday. The week's biggest stories, the patch notes that actually matter, and the reviews worth your time — read in under five minutes.</p>
      </div>
      <form id="nlForm" novalidate>
        <div class="nl-row">
          <input type="email" id="nlEmail" placeholder="you@example.com" aria-label="Email address" autocomplete="email">
          <button type="submit" class="btn btn-dark" id="nlBtn">Subscribe</button>
        </div>
        <p class="nl-err" id="nlErr" role="alert"></p>
        <p class="nl-small">84,000 subscribers · No spam, ever · Unsubscribe in one click</p>
      </form>
    </div>
  </section>
</main>

<!-- Footer -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div class="f-brand">
        <a class="brand" href="#home">
          <img src="https://placehold.co/88x88/C8F542/0B0C0E?text=SP&amp;font=montserrat" alt="Spawnpoint logo" width="40" height="40">
          <span class="brand-text"><strong>Spawnpoint</strong><small>Gaming · Esports · Community</small></span>
        </a>
        <p class="f-blurb">Independent gaming media since 2019. News, reviews and esports coverage — written by players, for players.</p>
        <div class="socials">
          <a href="#" class="socials-btn" data-demo aria-label="Spawnpoint on X"><svg class="icon icon-fill"><use href="#i-x"/></svg></a>
          <a href="#" data-demo aria-label="Spawnpoint on YouTube"><svg class="icon icon-fill"><use href="#i-youtube"/></svg></a>
          <a href="#" data-demo aria-label="Spawnpoint on Twitch"><svg class="icon icon-fill"><use href="#i-twitch"/></svg></a>
          <a href="#" class="js-discord" aria-label="Spawnpoint on Discord"><svg class="icon icon-fill"><use href="#i-discord"/></svg></a>
        </div>
      </div>
      <div class="f-col">
        <h4>Explore</h4>
        <ul>
          <li><a href="#news">News</a></li>
          <li><a href="#reviews">Reviews</a></li>
          <li><a href="#esports">Esports</a></li>
          <li><a href="#streaming">Streaming</a></li>
          <li><a href="#hardware">Hardware</a></li>
          <li><a href="#community">Community</a></li>
        </ul>
      </div>
      <div class="f-col">
        <h4>Company</h4>
        <ul>
          <li><a href="#" data-demo>About us</a></li>
          <li><a href="#" data-demo>Careers</a></li>
          <li><a href="#" data-demo>Advertise</a></li>
          <li><a href="#" data-demo>Ethics policy</a></li>
          <li><a href="#" data-demo>Contact</a></li>
        </ul>
      </div>
      <div class="f-col">
        <h4>Contact</h4>
        <ul class="f-contact">
          <li><svg class="icon"><use href="#i-mail"/></svg><span>hello@spawnpoint.gg</span></li>
          <li><svg class="icon"><use href="#i-mail"/></svg><span>tips@spawnpoint.gg — news desk</span></li>
          <li><svg class="icon"><use href="#i-phone"/></svg><span>+1 (555) 014-7788</span></li>
          <li><svg class="icon"><use href="#i-pin"/></svg><span>420 Respawn Ave, Suite 7<br>Austin, TX 78701</span></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="fb-inner">
        <span>© 2025 Spawnpoint Media Ltd. All rights reserved.</span>
        <div class="fb-links">
          <a href="#" data-demo>Privacy Policy</a>
          <a href="#" data-demo>Terms of Service</a>
          <a href="#" data-demo>Cookie Settings</a>
        </div>
      </div>
    </div>
  </div>
</footer>

<div class="toast-stack" id="toastStack" aria-live="polite"></div>

<script>
(function () {
  'use strict';
  var $ = function (s, c) { return (c || document).querySelector(s); };
  var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };

  /* ---------- Toast system ---------- */
  var stack = $('#toastStack');
  function toast(msg, type) {
    type = type || 'success';
    var icons = { success: 'i-check', error: 'i-cross', info: 'i-info' };
    var t = document.createElement('div');
    t.className = 'toast ' + type;
    t.innerHTML = '<svg class="icon" aria-hidden="true"><use href="#' + icons[type] + '"/></svg><span></span>';
    t.querySelector('span').textContent = msg;
    stack.appendChild(t);
    requestAnimationFrame(function () { t.classList.add('show'); });
    setTimeout(function () {
      t.classList.remove('show');
      setTimeout(function () { t.remove(); }, 350);
    }, 4200);
  }

  /* ---------- Header scroll state ---------- */
  var header = $('#siteHeader');
  window.addEventListener('scroll', function () {
    header.classList.toggle('scrolled', window.scrollY > 8);
  }, { passive: true });

  /* ---------- Mobile navigation ---------- */
  var navToggle = $('#navToggle'), mainNav = $('#mainNav');
  navToggle.addEventListener('click', function () {
    var open = mainNav.classList.toggle('open');
    navToggle.classList.toggle('open', open);
    navToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  $$('#mainNav a').forEach(function (a) {
    a.addEventListener('click', function () {
      mainNav.classList.remove('open');
      navToggle.classList.remove('open');
      navToggle.setAttribute('aria-expanded', 'false');
    });
  });

  /* ---------- Expanding search ---------- */
  var searchBox = $('#searchBox'), searchInput = $('#searchInput');
  function doSearch() {
    var q = searchInput.value.trim();
    if (!q) return;
    toast('No results for \u201C' + q + '\u201D in this preview \u2014 try the Trending Games list.', 'info');
    searchInput.value = '';
    searchBox.classList.remove('open');
  }
  $('#searchBtn').addEventListener('click', function () {
    if (!searchBox.classList.contains('open')) {
      searchBox.classList.add('open');
      searchInput.focus();
    } else if (searchInput.value.trim()) {
      doSearch();
    } else {
      searchBox.classList.remove('open');
    }
  });
  searchInput.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') doSearch();
    if (e.key === 'Escape') { searchBox.classList.remove('open'); searchInput.blur(); }
  });

  /* ---------- Scroll reveal ---------- */
  var rObs = new IntersectionObserver(function (entries) {
    entries.forEach(function (en) {
      if (en.isIntersecting) { en.target.classList.add('in'); rObs.unobserve(en.target); }
    });
  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
  $$('.reveal').forEach(function (el) { rObs.observe(el); });

  /* ---------- Count-up stats ---------- */
  var cObs = new IntersectionObserver(function (entries) {
    entries.forEach(function (en) {
      if (!en.isIntersecting) return;
      cObs.unobserve(en.target);
      var el = en.target, raw = el.getAttribute('data-count');
      var target = parseFloat(raw);
      var dec = (raw.split('.')[1] || '').length;
      var suf = el.getAttribute('data-suffix') || '';
      var t0 = performance.now(), dur = 1500;
      function tick(now) {
        var p = Math.min((now - t0) / dur, 1);
        var e = 1 - Math.pow(1 - p, 3);
        var val = target * e;
        el.textContent = (dec ? val.toFixed(dec) : Math.round(val).toLocaleString('en-US')) + suf;
        if (p < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    });
  }, { threshold: 0.5 });
  $$('.stat-num').forEach(function (el) { cObs.observe(el); });

  /* ---------- Live viewer jitter ---------- */
  function fmt(n) { return n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K' : String(n); }
  var vEls = $$('.js-viewers');
  if (vEls.length) {
    setInterval(function () {
      vEls.forEach(function (el) {
        var base = parseFloat(el.getAttribute('data-base')) || 1000;
        var v = Math.max(400, Math.round(base * (1 + (Math.random() * 0.08 - 0.04))));
        el.textContent = fmt(v);
      });
    }, 2600);
  }

  /* ---------- Stream row arrows ---------- */
  var row = $('#streamRow');
  $('#streamPrev').addEventListener('click', function () { row.scrollBy({ left: -340, behavior: 'smooth' }); });
  $('#streamNext').addEventListener('click', function () { row.scrollBy({ left: 340, behavior: 'smooth' }); });

  /* ---------- FAQ accordion (single open) ---------- */
  $$('.faq-item').forEach(function (item) {
    var btn = item.querySelector('.faq-q'), panel = item.querySelector('.faq-a');
    btn.addEventListener('click', function () {
      var wasOpen = item.classList.contains('open');
      $$('.faq-item.open').forEach(function (o) {
        o.classList.remove('open');
        o.querySelector('.faq-a').style.maxHeight = '0px';
        o.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
      });
      if (!wasOpen) {
        item.classList.add('open');
        panel.style.maxHeight = panel.scrollHeight + 'px';
        btn.setAttribute('aria-expanded', 'true');
      }
    });
  });

  /* ---------- Newsletter validation ---------- */
  $('#nlForm').addEventListener('submit', function (e) {
    e.preventDefault();
    var input = $('#nlEmail'), err = $('#nlErr'), btn = $('#nlBtn');
    var email = input.value.trim();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) {
      err.textContent = "That email doesn't look right \u2014 mind checking it?";
      var nlRow = $('.nl-row');
      nlRow.classList.remove('shake'); void nlRow.offsetWidth; nlRow.classList.add('shake');
      input.focus();
      return;
    }
    err.textContent = '';
    toast('Welcome aboard \u2014 confirmation sent to ' + email + '.', 'success');
    e.target.reset();
    var old = btn.textContent;
    btn.textContent = 'Subscribed';
    btn.disabled = true;
    setTimeout(function () { btn.textContent = old; btn.disabled = false; }, 3200);
  });
  $('#nlEmail').addEventListener('input', function () { $('#nlErr').textContent = ''; });

  /* ---------- Discord invite (copies to clipboard) ---------- */
  $$('.js-discord').forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      var invite = 'https://discord.gg/spawnpoint';
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(invite).then(function () {
          toast('Invite copied to clipboard \u2014 see you in the server!', 'success');
        }).catch(function () {
          toast('Invite: discord.gg/spawnpoint \u2014 see you in the server!', 'info');
        });
      } else {
        toast('Invite: discord.gg/spawnpoint \u2014 see you in the server!', 'info');
      }
    });
  });

  /* ---------- Demo links (preview build) ---------- */
  document.addEventListener('click', function (e) {
    var demo = e.target.closest('[data-demo]');
    if (demo) {
      e.preventDefault();
      toast('Design preview \u2014 this link opens the full page in the production build.', 'info');
    }
  });

  /* ---------- FPS Lab: dual canvas frame-rate simulation ---------- */
  var cvLeft = $('#cvLeft'), cvRight = $('#cvRight');
  if (cvLeft && cvRight && cvLeft.getContext) {
    var msLeft = $('#msLeft'), fpsLeft = $('#fpsLeft');
    var msRight = $('#msRight'), fpsRight = $('#fpsRight');
    var verdict = $('#labVerdict'), hint = $('#labHint'), pickLabel = $('#pickLabel');
    var state = { fps: 144 };
    var verdicts = {
      30: 'Rough \u2014 you can count the frames. Slideshow territory.',
      60: 'The competitive baseline. Smooth, responsive, perfectly playable.',
      75: 'A clear step up \u2014 noticeably more fluid, better frame pacing.',
      120: 'High-refresh territory. Fast camera moves stay clean and readable.',
      144: 'The esports sweet spot. Fluid, attainable, and worth the upgrade.',
      165: 'Silky \u2014 but your panel needs to keep up to actually show it.',
      240: 'Frame times under 5ms. Diminishing returns, maximum bragging rights.'
    };
    $$('.lab-btn').forEach(function (b) {
      b.addEventListener('click', function () {
        $$('.lab-btn').forEach(function (x) { x.classList.remove('active'); });
        b.classList.add('active');
        state.fps = parseInt(b.getAttribute('data-fps'), 10);
        pickLabel.textContent = state.fps + ' FPS';
        verdict.textContent = verdicts[state.fps];
        hint.classList.remove('show');
      });
    });

    function sim(canvas, getFps, msEl, fpsEl, isRight) {
      var ctx = canvas.getContext('2d');
      var dpr = Math.min(window.devicePixelRatio || 1, 2);
      var W = 0, H = 0;
      function resize() {
        var r = canvas.getBoundingClientRect();
        W = r.width; H = r.height;
        canvas.width = Math.max(1, Math.round(W * dpr));
        canvas.height = Math.max(1, Math.round(H * dpr));
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      }
      resize();
      window.addEventListener('resize', resize);

      var SPEED = 340; /* pixels per second, identical for both panels */
      var pos = 0.2 + Math.random() * 0.6, dir = 1;
      var acc = 0, last = performance.now();
      var frames = 0, fpsAcc = 0;
      var visible = true, raf = null;
      var trail = [];

      function render() {
        ctx.clearRect(0, 0, W, H);
        var cy = H / 2, i, x, y, a;
        ctx.strokeStyle = 'rgba(255,255,255,0.05)';
        ctx.lineWidth = 1;
        for (i = 1; i < 4; i++) {
          y = H * i / 4;
          ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
        }
        ctx.strokeStyle = 'rgba(255,255,255,0.16)';
        ctx.beginPath(); ctx.moveTo(0, cy); ctx.lineTo(W, cy); ctx.stroke();
        ctx.strokeStyle = 'rgba(255,255,255,0.22)';
        for (i = 0; i <= 10; i++) {
          x = W * i / 10;
          ctx.beginPath(); ctx.moveTo(x, cy - 5); ctx.lineTo(x, cy + 5); ctx.stroke();
        }
        for (i = 0; i < trail.length; i++) {
          a = (i + 1) / trail.length;
          ctx.fillStyle = 'rgba(200,245,66,' + (a * 0.32).toFixed(3) + ')';
          ctx.beginPath(); ctx.arc(trail[i] * W, cy, 1.5 + a * 3.5, 0, 7); ctx.fill();
        }
        ctx.save();
        ctx.shadowColor = 'rgba(200,245,66,0.9)';
        ctx.shadowBlur = 16;
        ctx.fillStyle = '#C8F542';
        ctx.beginPath(); ctx.arc(pos * W, cy, 7, 0, 7); ctx.fill();
        ctx.restore();
      }

      function loop(now) {
        raf = null;
        if (!visible) return;
        var dt = Math.min(now - last, 100);
        last = now;
        var interval = 1000 / getFps();
        acc += dt;
        while (acc >= interval) {
          acc -= interval;
          pos += (SPEED * interval / 1000) / W * dir;
          if (pos >= 1) { pos = 1; dir = -1; }
          else if (pos <= 0) { pos = 0; dir = 1; }
          trail.push(pos);
          if (trail.length > 34) trail.shift();
          frames++;
        }
        render();
        fpsAcc += dt;
        if (fpsAcc >= 1000) {
          var measured = frames;
          frames = 0; fpsAcc = 0;
          if (fpsEl) fpsEl.textContent = measured + ' fps';
          if (msEl) msEl.textContent = interval.toFixed(1) + ' ms';
          if (isRight) {
            if (getFps() - measured >= 8) {
              hint.innerHTML = 'This display appears to refresh at ~<b>' + measured + 'Hz</b> \u2014 anything above that will look identical here. The frame-time numbers still tell the story.';
              hint.classList.add('show');
            } else {
              hint.classList.remove('show');
            }
          }
        }
        raf = requestAnimationFrame(loop);
      }

      new IntersectionObserver(function (en) {
        visible = en[0].isIntersecting;
        if (visible && !raf) { last = performance.now(); raf = requestAnimationFrame(loop); }
      }).observe(canvas);

      raf = requestAnimationFrame(loop);
    }

    sim(cvLeft, function () { return 60; }, msLeft, fpsLeft, false);
    sim(cvRight, function () { return state.fps; }, msRight, fpsRight, true);
    verdict.textContent = verdicts[state.fps];
  }
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T10:11:40.305Z",
  "url": "https://benchmark.aimac.invalid/bb0c6df38e8e8610ffafa51aece77d43b98afb59bc2cb3eef1b2be7e112b99c1.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"ticker\" aria-label=\"Live news ticker\">",
          "target": [
            ".ticker"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"ticker\" aria-label=\"Live news ticker\">",
          "target": [
            ".ticker"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"map-bar\" role=\"img\" aria-label=\"Nexus leading 58 percent of rounds\"><i></i></div>",
          "target": [
            ".map-bar"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\" aria-hidden=\"true\">",
          "target": [
            "svg[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#home\" aria-label=\"Spawnpoint home\">",
          "target": [
            "a[aria-label=\"Spawnpoint home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"map-bar\" role=\"img\" aria-label=\"Nexus leading 58 percent of rounds\"><i></i></div>",
          "target": [
            ".map-bar"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"map-bar\" role=\"img\" aria-label=\"Nexus leading 58 percent of rounds\"><i></i></div>",
          "target": [
            ".map-bar"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"ticker\" aria-label=\"Live news ticker\">",
          "target": [
            ".ticker"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"ticker\" aria-label=\"Live news ticker\">",
          "target": [
            ".ticker"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input type=\"email\" id=\"nlEmail\" placeholder=\"you@example.com\" aria-label=\"Email address\" autocomplete=\"email\">",
          "target": [
            "#nlEmail"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span class=\"kicker\" style=\"margin-top:.9rem\">Esports \u00b7 Worlds 2025</span>",
          "target": [
            ".in.reveal:nth-child(1) > .kicker"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"icon-btn\" id=\"searchBtn\" aria-label=\"Search\"><svg class=\"icon\"><use href=\"#i-search\"></use></svg></button>",
          "target": [
            "#searchBtn"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>Eight million watched. <em>One moment</em> decided everything.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\"><span class=\"slash\">//</span>Latest News</h2>",
                  "target": [
                    ".news-layout > div > .section-head.reveal > div > .section-title"
                  ]
                },
                {
                  "html": "<h3>Patch 14.8 rewrites the meta \u2014 what changed, what broke, and what to abuse before it's fixed</h3>",
                  "target": [
                    ".card-feature > .card-body > h3"
                  ]
                },
                {
                  "html": "<h4>We tested nine gaming mice under $80 \u2014 one embarrassed the flagships</h4>",
                  "target": [
                    ".news-mosaic > .card-h.card.reveal:nth-child(2) > .ch-body > h4"
                  ]
                },
                {
                  "html": "<h4>Transfer window: the five moves that will reshape the 2026 season</h4>",
                  "target": [
                    ".card-h.card.reveal:nth-child(3) > .ch-body > h4"
                  ]
                },
                {
                  "html": "<h4>The 20-minute aim routine used by tier-one pros (no Aim Lab required)</h4>",
                  "target": [
                    ".card-h.card.reveal:nth-child(1) > .ch-body > h4"
                  ]
                },
                {
                  "html": "<h4>Cross-play, cross-progression, cross-everything: 2025 was the year the walls came down</h4>",
                  "target": [
                    ".mosaic-duo > .card-h.card.reveal:nth-child(2) > .ch-body > h4"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">Trending Games <a href=\"#\" data-demo=\"\">View all</a></h3>",
                  "target": [
                    ".widget.reveal:nth-child(1) > .widget-title"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">Patch Notes <a href=\"#\" data-demo=\"\">Archive</a></h3>",
                  "target": [
                    ".widget.reveal:nth-child(2) > .widget-title"
                  ]
                },
                {
                  "html": "<h3 class=\"widget-title\">Live on Spawnpoint <a href=\"#streaming\">Watch</a></h3>",
                  "target": [
                    ".widget.reveal:nth-child(3) > .widget-title"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\"><span class=\"slash\">//</span>Esports</h2>",
                  "target": [
                    "#esports > .container > .section-head.reveal > div > .section-title"
                  ]
                },
                {
                  "html": "<h3 class=\"panel-title\">Upcoming Matches <a href=\"#\" data-demo=\"\">Full schedule</a></h3>",
                  "target": [
                    ".panel-card.reveal:nth-child(1) > .panel-title"
                  ]
                },
                {
                  "html": "<h3 class=\"panel-title\">Standings <a href=\"#\" data-demo=\"\">Full table</a></h3>",
                  "target": [
                    ".panel-card.reveal:nth-child(2) > .panel-title"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\"><span class=\"slash\">//</span>On Air Now</h2>",
                  "target": [
                    "#streaming > .container > .section-head.reveal > div:nth-child(1) > .section-title"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\"><span class=\"slash\">//</span>Reviews</h2>",
                  "target": [
                    "#reviews > .container > .section-head.reveal > div > .section-title"
                  ]
                },
                {
                  "html": "<h3>Stellar Drift</h3>",
                  "target": [
                    ".rf-body > h3"
                  ]
                },
                {
                  "html": "<h5>What we loved</h5>",
                  "target": [
                    ".pros > h5"
                  ]
                },
                {
                  "html": "<h5>What held it back</h5>",
                  "target": [
                    ".cons > h5"
                  ]
                },
                {
                  "html": "<h4>Ironclad Tactics II</h4>",
                  "target": [
                    ".review-row[data-demo=\"\"][href=\"#\"]:nth-child(1) > .rr-body > h4"
                  ]
                },
                {
                  "html": "<h4>Night City Rally</h4>",
                  "target": [
                    ".review-row[data-demo=\"\"][href=\"#\"]:nth-child(2) > .rr-body > h4"
                  ]
                },
                {
                  "html": "<h4>Aetherfall: Reforged</h4>",
                  "target": [
                    ".review-row[data-demo=\"\"][href=\"#\"]:nth-child(3) > .rr-body > h4"
                  ]
                },
                {
                  "html": "<h2>Feel the framerate. Don't just read about it.</h2>",
                  "target": [
                    ".lab-head > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\"><span class=\"slash\">//</span>Hardware &amp; Gear</h2>",
                  "target": [
                    "#hardware > .container > .section-head.reveal > div > .section-title"
                  ]
                },
                {
                  "html": "<h3>The 240Hz upgrade guide: is high refresh actually worth your money?</h3>",
                  "target": [
                    ".gear-feature > .card-body > h3"
                  ]
                },
                {
                  "html": "<h4>Vxel Viper Mini Pro</h4>",
                  "target": [
                    ".gear-row.card.reveal:nth-child(1) > .ch-body > .gr-top > h4"
                  ]
                },
                {
                  "html": "<h4>Keychron Q1 Pro (modded)</h4>",
                  "target": [
                    ".gear-row.card.reveal:nth-child(2) > .ch-body > .gr-top > h4"
                  ]
                },
                {
                  "html": "<h4>HyperX Cloud III</h4>",
                  "target": [
                    ".gear-row.card.reveal:nth-child(3) > .ch-body > .gr-top > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\"><span class=\"slash\">//</span>Community</h2>",
                  "target": [
                    "#community > .container > .section-head.reveal > div > .section-title"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\"><span class=\"slash\">//</span>Support &amp; FAQ</h2>",
                  "target": [
                    ".faq-copy > .section-title"
                  ]
                },
                {
                  "html": "<h2>Never miss a patch note.</h2>",
                  "target": [
                    ".nl-copy > h2"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    ".f-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Company</h4>",
                  "target": [
                    ".f-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    ".f-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#9aa093",
                "bgColor": "#0b0c0e",
                "contrastRatio": 7.29,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 7.29"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"tick-item\"><span class=\"live-flag\">LIVE</span> Worlds 2025 Grand Final \u2014 Nexus Esports 2\u20131 Aether Blaze</span>",
          "target": [
            ".ticker-set:nth-child(1) > .tick-item:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"search\" id=\"searchInput\" placeholder=\"Search news, reviews, games\u2026\" aria-label=\"Search Spawnpoint\">",
          "target": [
            "#searchInput"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/88x88/C8F542/0B0C0E?text=SP&amp;font=montserrat\" alt=\"Spawnpoint logo\" width=\"44\" height=\"44\">",
          "target": [
            "img[width=\"44\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"search\" id=\"searchInput\" placeholder=\"Search news, reviews, games\u2026\" aria-label=\"Search Spawnpoint\">",
          "target": [
            "#searchInput"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#news\">Skip to content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ol class=\"trend-list\">",
          "target": [
            "ol"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><span class=\"trend-rank\">01</span><img src=\"https://picsum.photos/seed/sp-game-1/96/96\" alt=\"\" loading=\"lazy\"><div class=\"trend-info\"><strong>Stellar Drift</strong><span>412K online</span></div><span class=\"trend-up\">\u25b2 12%</span></li>",
          "target": [
            "ol > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/88x88/C8F542/0B0C0E?text=SP&amp;font=montserrat\" alt=\"Spawnpoint logo\" width=\"44\" height=\"44\">",
          "target": [
            "img[width=\"44\"]"
          ]
        }
      ]
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"map-bar\" role=\"img\" aria-label=\"Nexus leading 58 percent of rounds\"><i></i></div>",
          "target": [
            ".map-bar"
          ]
        }
      ]
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element contains focusable elements"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"stream-row reveal\" id=\"streamRow\">",
          "target": [
            "#streamRow"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 141.9,
                "height": 45.6
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (141.9px by 45.6px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#news\">Skip to content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "td-headers-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The headers attribute is exclusively used to refer to other cells in the table"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<table class=\"standings\">",
          "target": [
            "table"
          ]
        }
      ]
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "th-has-data-cells",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "All table header cells refer to data cells"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<table class=\"standings\">",
          "target": [
            "table"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"ticker\" aria-label=\"Live news ticker\">",
          "target": [
            ".ticker"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "7.9pt (10.56px)",
                "fontWeight": "bold",
                "messageKey": "bgOverlap",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element's background color could not be determined because it is overlapped by another element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"ticker-label\"><span class=\"dot\"></span>Live</div>",
          "target": [
            ".ticker-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "target-size",
      "impact": "serious",
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "messageKey": "partiallyObscured",
                "minSize": 24,
                "width": 790.4,
                "height": 19.9
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#news\">News</a>",
                  "target": [
                    "#mainNav > a[href$=\"#news\"]"
                  ]
                },
                {
                  "html": "<a href=\"#esports\">Esports</a>",
                  "target": [
                    "#mainNav > a[href$=\"#esports\"]"
                  ]
                },
                {
                  "html": "<a href=\"#streaming\">Streaming</a>",
                  "target": [
                    "#mainNav > a[href$=\"#streaming\"]"
                  ]
                },
                {
                  "html": "<a href=\"#reviews\">Reviews</a>",
                  "target": [
                    "#mainNav > a[href$=\"#reviews\"]"
                  ]
                },
                {
                  "html": "<a href=\"#hardware\">Hardware</a>",
                  "target": [
                    "#mainNav > a[href$=\"#hardware\"]"
                  ]
                },
                {
                  "html": "<a href=\"#community\">Community</a>",
                  "target": [
                    "#mainNav > a[href$=\"#community\"]"
                  ]
                },
                {
                  "html": "<a href=\"#support\">Support</a>",
                  "target": [
                    "a[href$=\"#support\"]"
                  ]
                },
                {
                  "html": "<button class=\"icon-btn\" id=\"searchBtn\" aria-label=\"Search\"><svg class=\"icon\"><use href=\"#i-search\"></use></svg></button>",
                  "target": [
                    "#searchBtn"
                  ]
                },
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary btn-sm js-discord\"><svg class=\"icon icon-fill\"><use href=\"#i-discord\"></use></svg>Join Discord</a>",
                  "target": [
                    ".btn-sm.js-discord.btn-primary"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 790.4px by 19.9px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 2.6,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"faq-q\" aria-expanded=\"false\">Do you cover console and mobile gaming?<svg class=\"icon\"><use href=\"#i-chevron\"></use></svg></button>",
                  "target": [
                    ".faq-item:nth-child(5) > .faq-q"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 2.6px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"faq-q\" aria-expanded=\"false\">Can I write for Spawnpoint or send a news tip?<svg class=\"icon\"><use href=\"#i-chevron\"></use></svg></button>",
          "target": [
            ".faq-item:nth-child(4) > .faq-q"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 790.4px by 19.9px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 2.6px instead of at least 24px."
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 9041
      },
      {
        "y": 576,
        "height": 9041
      },
      {
        "y": 1152,
        "height": 9041
      },
      {
        "y": 1728,
        "height": 9041
      },
      {
        "y": 2304,
        "height": 9041
      },
      {
        "y": 2880,
        "height": 9041
      },
      {
        "y": 3456,
        "height": 9041
      },
      {
        "y": 4032,
        "height": 9041
      },
      {
        "y": 4608,
        "height": 9041
      },
      {
        "y": 5184,
        "height": 9041
      },
      {
        "y": 5760,
        "height": 9041
      },
      {
        "y": 6336,
        "height": 9041
      },
      {
        "y": 6912,
        "height": 9041
      },
      {
        "y": 7488,
        "height": 9041
      },
      {
        "y": 8064,
        "height": 9041
      },
      {
        "y": 8321,
        "height": 9041
      }
    ],
    "scans": 17,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Gaming" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Gaming"
- Description: Video games, esports news, game reviews, and online gaming communities.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Gaming" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Support", "Streaming", "News".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Gaming" category. Consider themes similar to: "Community Highlights", "Gaming Hardware", "Esports News".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "framerate", "speedrun", "cross-platform".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Join Discord", "Download Now", "Subscribe".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Gaming" sector. Ideas similar but not limited to: "stats comparison".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "gaming news", "trending games", "patch notes".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.