:root{--bg:#0a0a0d;--card:#15151b;--line:#2a2a33;--ink:#f3f1ea;--mute:#a09d94;--hot:#ff5a1f;--gold:#ffd600}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:inherit} .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:5;background:rgba(10,10,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand img{border-radius:50%} .brand strong{font-size:18px;letter-spacing:.02em}
nav{margin-left:auto;display:flex;gap:18px;font-size:15px} nav a{text-decoration:none;color:var(--mute)} nav a:hover{color:var(--ink)}
.hero{padding:72px 0 64px;background-position:center;background-size:cover}
h1{font-size:clamp(30px,4.6vw,44px);line-height:1.12;margin:0 0 12px;font-weight:900;letter-spacing:-.02em}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.05;max-width:15ch} .hero h1 span{color:var(--gold)}
.hero p{max-width:56ch;color:#ddd9cf;font-size:19px;margin:0 0 26px}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;font-weight:800;text-decoration:none;margin:0 10px 10px 0}
.btn.main{background:var(--hot);color:#140600} .btn.ghost{border:1px solid #55524b;color:var(--ink)}
section{padding:50px 0 6px} section.top{padding-top:36px} .narrow .wrap{max-width:820px}
h2{font-size:26px;margin:34px 0 6px;letter-spacing:-.01em} section>.wrap>h2:first-child{margin-top:0}
.sub{color:var(--mute);margin:0 0 20px} .more{margin:22px 0 0} .note,.small{color:var(--mute);font-size:14px} .note{margin-top:14px}
.crumb{margin:0 0 10px;font-size:15px;color:var(--mute)} .tags{margin:0 0 18px}
.tag{display:inline-block;font-size:14px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);text-decoration:none;margin:0 6px 6px 0;color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.v{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s}
.v:hover{transform:translateY(-3px);border-color:var(--hot)}
.th{display:block;position:relative;aspect-ratio:16/9;background:#000} .th img{width:100%;height:100%;object-fit:cover;display:block}
.th i,.player i{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.72)}
.th i:after,.player i:after{content:"";position:absolute;left:15px;top:11px;border:8px solid transparent;border-left:13px solid #fff}
.v b{display:block;padding:12px 14px 4px;font-size:16px;line-height:1.3} .v em{display:block;padding:0 14px 14px;font-style:normal;font-size:13px;color:var(--mute)}
.shorts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px} .s .th{aspect-ratio:9/16} .s b{padding-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chips button{font:inherit;font-size:15px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--mute);cursor:pointer}
.chips button.on{background:var(--gold);border-color:var(--gold);color:#111}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.tile{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px} .tile:hover{border-color:var(--gold)}
.tile b{display:block;font-size:17px} .tile span{color:var(--mute);font-size:14px} .tiles.big{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.code{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.code h3{margin:0 0 4px;font-size:18px} .code p{margin:0 0 12px;color:var(--mute);font-size:15px}
.code button{font:inherit;font-weight:800;letter-spacing:.04em;padding:10px 14px;border-radius:10px;border:1px dashed var(--gold);background:#1c1a10;color:var(--gold);cursor:pointer;width:100%}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;cursor:pointer;margin:0 0 14px;border:1px solid var(--line)}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.player i{right:50%;bottom:50%;transform:translate(50%,50%);width:74px;height:74px;background:var(--hot)} .player i:after{left:29px;top:21px;border-width:16px;border-left-width:26px;border-left-color:#140600}
.band{margin:54px 0 0;padding:44px 0;background:linear-gradient(90deg,#1c0d06,#15151b);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
footer{padding:40px 0 60px;color:var(--mute);font-size:15px;margin-top:40px} footer a{margin-right:16px} footer strong{color:var(--ink)}
@media(max-width:700px){nav{gap:12px;font-size:14px} .brand strong{display:none} .hero{padding:48px 0}}

.tips{padding-left:20px;margin:0 0 10px} .tips li{margin:0 0 10px} main p{max-width:75ch}
@media(max-width:900px){nav{gap:12px;font-size:14px}}

/* theme carried through every page */
body{background:var(--bg) radial-gradient(1200px 500px at 85% -10%,rgba(255,90,31,.10),transparent 60%) no-repeat}
header{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--hot),var(--gold),var(--hot)) 1}
header .wrap{height:72px}
.brand img{border:2px solid var(--hot);box-shadow:0 0 14px rgba(255,90,31,.45)}
section.top{position:relative;isolation:isolate;padding-top:54px}
section.top::before{content:"";position:absolute;left:0;right:0;top:0;height:250px;z-index:-1;background:linear-gradient(180deg,rgba(10,10,13,.62),rgba(10,10,13,.88) 62%,var(--bg)),url("/img/banner.jpg") center/cover}
section.top h1{text-shadow:0 2px 18px rgba(0,0,0,.8)} section.top h1::after{content:"";display:block;width:84px;height:5px;border-radius:3px;margin-top:12px;background:linear-gradient(90deg,var(--hot),var(--gold))}
h2{padding-left:12px;border-left:4px solid var(--hot)}
.code .shop{display:block;text-align:center;margin-top:10px;padding:11px 14px;border-radius:10px;background:var(--hot);color:#140600;font-weight:800;text-decoration:none}
footer{border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--hot),var(--gold),var(--hot)) 1;background:linear-gradient(180deg,#120a07,var(--bg))}
.flogo{display:flex;align-items:center;gap:14px} .flogo img{border-radius:50%;border:2px solid var(--hot)} .flogo strong{font-size:20px}
.tile:hover,.v:hover{box-shadow:0 6px 24px rgba(255,90,31,.18)}

/* write-ups, picks, compare, finder, stats, links */
.facts{width:100%;border-collapse:collapse;margin:8px 0 6px;font-size:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.facts th,.facts td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top} .facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts th{color:var(--mute);font-weight:700;width:34%} .facts.cmp th{width:22%} .facts.cmp tr:first-child th{color:var(--gold);font-size:15px}
.tablewrap{overflow-x:auto} .tablewrap .facts{min-width:560px}
.pick{display:grid;grid-template-columns:230px 1fr;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 14px}
.pick .pth img{width:100%;height:auto;border-radius:10px;display:block} .pick h3{margin:0 0 2px;font-size:18px;line-height:1.3} .pick h3 a{text-decoration:none} .pick h3 a:hover{color:var(--gold)}
.pick p{margin:0 0 10px} .ptype{color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.btn.sm{padding:8px 16px;font-size:14px;margin-bottom:0}
.callout{border-left:4px solid var(--gold);background:#1c1a10;padding:14px 16px;border-radius:0 12px 12px 0}
.quiz fieldset{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 16px 8px;margin:0 0 12px} .quiz legend{font-weight:800;padding:0 6px}
.quiz button{font:inherit;font-size:15px;font-weight:700;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:#0f0f14;color:var(--mute);cursor:pointer;margin:0 8px 8px 0}
.quiz button.on{background:var(--gold);border-color:var(--gold);color:#111}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.stats b{display:block;font-size:26px;color:var(--gold);line-height:1.1} .stats span{color:var(--mute);font-size:14px}
.linkpage{max-width:520px;margin:0 auto;text-align:center} .linkpage img{border-radius:50%;border:3px solid var(--hot);box-shadow:0 0 22px rgba(255,90,31,.5)} .linkpage h1::after{margin-left:auto;margin-right:auto}
.lbtn{display:block;padding:15px 18px;margin:0 0 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-weight:800;text-decoration:none} .lbtn:hover{border-color:var(--gold)} .lbtn.hot{background:var(--hot);color:#140600;border-color:var(--hot)}
footer p{line-height:2.1}
@media(max-width:1000px){header .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px} nav{margin-left:0;width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:2px}}
@media(max-width:600px){.pick{grid-template-columns:1fr}}