@font-face{font-family:"Audiowide";src:url("/fonts/audiowide.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hind";src:url("/fonts/hind-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hind";src:url("/fonts/hind-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Hind";src:url("/fonts/hind-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hind";src:url("/fonts/hind-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#050014;--deep:#0b0520;--panel:#12082c;--cyan:#00f6ff;--mag:#ff2bd6;
  --chrome:#c8d0dc;--lilac:#b48cff;--violet:#2a0a4a;--foam:#f4fbff;--mute:#9aa3c2;
  --cta:linear-gradient(90deg,#00f6ff 0%,#7a5cff 52%,#ff2bd6 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hind",system-ui,sans-serif;
  background:
    radial-gradient(900px 420px at 8% -8%, #00f6ff22, transparent 58%),
    radial-gradient(800px 380px at 100% 0%, #ff2bd622, transparent 55%),
    var(--ink);
  color:var(--foam);font-size:16px;line-height:1.55;font-weight:400;
}
a{color:var(--cyan)}
img{max-width:100%;height:auto;display:block}
/* chrome-bezel header: logo >=44px, nav pills 36-40px */
.ks-bezel{
  background:linear-gradient(180deg,#151028,#0a0618 70%);
  border-bottom:1px solid #00f6ff55;
  box-shadow:0 0 18px #00f6ff22, inset 0 -1px 0 #ff2bd633;
}
.ks-bezel-inner{
  max-width:1280px;margin:0 auto;padding:6px 16px 5px;
  display:flex;align-items:center;gap:14px;min-height:62px;
}
.ks-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.ks-token{
  width:46px;height:46px;flex:0 0 46px;
  background:radial-gradient(circle at 35% 30%, #7efcff, #0088aa 55%, #3a1060);
  clip-path:polygon(25% 4%,75% 4%,98% 50%,75% 96%,25% 96%,2% 50%);
  box-shadow:0 0 14px #00f6ff88;
  display:grid;place-items:center;
  font-family:"Audiowide",sans-serif;font-size:11px;color:#050014;letter-spacing:-.04em;
}
.ks-mark{
  font-family:"Audiowide",sans-serif;font-size:44px;line-height:1;
  color:#fff;letter-spacing:.01em;
  text-shadow:0 0 12px #00f6ffaa, 0 0 2px #ff2bd6;
  background:linear-gradient(90deg,#fff,#00f6ff 70%,#d8b8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .ks-mark{color:#00f6ff}
}
.ks-nav{display:flex;flex-wrap:wrap;gap:6px;flex:1;justify-content:flex-end;align-items:center}
.ks-nav a{
  display:inline-flex;align-items:center;gap:5px;
  height:38px;padding:0 12px;border-radius:999px;
  font-weight:700;font-size:13.5px;color:#f4fbff;text-decoration:none;
  background:linear-gradient(180deg,#1a1240,#0c0824);
  border:1px solid #00f6ff66;
  box-shadow:0 0 10px #00f6ff33, inset 0 1px 0 #ffffff22;
}
.ks-nav a[aria-current="page"],.ks-nav a:hover{
  background:linear-gradient(180deg,#3a1870,#1a0a40);
  border-color:#ff2bd6aa;box-shadow:0 0 12px #ff2bd655;
}
.ks-ico{width:14px;height:14px;flex:0 0 14px}
.ks-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cta);color:#050014;font-weight:800;font-size:15px;
  letter-spacing:.04em;text-decoration:none;text-transform:uppercase;
  padding:12px 22px;border-radius:999px;border:0;
  box-shadow:0 0 18px #00f6ff66, 0 0 8px #ff2bd655;
  white-space:nowrap;
}
.ks-cta:hover{filter:brightness(1.08)}
.ks-cta-alt{
  background:linear-gradient(90deg,#ff2bd6,#7a5cff);
  color:#fff;box-shadow:0 0 16px #ff2bd666;
}
.ks-scan{
  overflow:hidden;white-space:nowrap;
  background:#0a0030;border-top:1px solid #00f6ff88;border-bottom:1px solid #ff2bd688;
  font-size:13px;font-weight:700;color:#7efcff;
  min-height:26px;line-height:26px;
  box-shadow:inset 0 0 12px #00f6ff22;
}
.ks-scan-track{display:inline-block;white-space:nowrap;animation:ks-scroll 36s linear infinite}
.ks-scan-track b{color:#ff9aee;font-weight:800}
@keyframes ks-scroll{to{transform:translateX(-50%)}}
/* compact full-width hero 280px, H1 >=60px */
.ks-stage{max-width:1280px;margin:0 auto;padding:8px 16px 4px}
.ks-hero{
  position:relative;height:280px;border-radius:16px;overflow:hidden;
  border:2px solid #c8d0dc88;
  box-shadow:0 0 24px #00f6ff33, inset 0 0 0 1px #ff2bd644;
}
.ks-hero img{width:100%;height:280px;object-fit:cover;object-position:68% 50%;display:block}
.ks-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#050014ee 0%,#05001499 28%,#05001422 58%,transparent 72%);
  pointer-events:none;
}
.ks-copy{position:absolute;left:22px;top:18px;max-width:560px;z-index:2}
.ks-copy h1{
  font-family:"Audiowide",sans-serif;font-weight:400;
  font-size:60px;line-height:1.02;color:#fff;margin:0 0 14px;
  text-shadow:0 0 18px #00f6ffaa, 0 2px 0 #050014;
  letter-spacing:.01em;
}
.ks-copy h1 em{font-style:normal;color:var(--cyan);display:block;font-size:36px;margin-top:4px;letter-spacing:.02em;text-shadow:0 0 16px #00f6ff}
.ks-crt{
  position:absolute;right:16px;top:16px;z-index:2;
  width:148px;padding:10px 12px;border-radius:12px;
  background:radial-gradient(circle at 40% 32%, #1a2044, #050014f0 72%);
  border:1px solid #00f6ff99;box-shadow:0 0 16px #00f6ff55, inset 0 0 12px #00f6ff22;
  text-align:center;
}
.ks-crt span{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:800}
.ks-crt strong{display:block;font-family:"Audiowide",sans-serif;font-size:1.15rem;color:#fff;line-height:1.1;margin-top:4px}
.ks-crt em{display:block;font-style:normal;color:#ff9aee;font-weight:700;font-size:.72rem;margin-top:3px}
/* slim promo row ~128px, titles 24px+, no paragraphs */
.ks-promos{
  max-width:1280px;margin:0 auto;padding:8px 16px 4px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.ks-promo{
  display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:center;
  height:128px;overflow:hidden;border-radius:14px;text-decoration:none;color:inherit;
  background:linear-gradient(90deg,#12082c,#0b0520);
  border:1px solid #00f6ff55;box-shadow:0 0 12px #00f6ff22;
}
.ks-promo img{width:128px;height:128px;object-fit:cover}
.ks-promo h2{
  margin:0;padding-right:10px;
  font-family:"Audiowide",sans-serif;font-size:24px;line-height:1.15;
  color:#fff;font-weight:400;text-shadow:0 0 10px #ff2bd666;
}
/* arcade row of 8 tiles — fully visible on 1280x800 */
.ks-hall{max-width:1280px;margin:0 auto;padding:6px 16px 8px}
.ks-row{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.ks-tile{
  position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:12px;overflow:hidden;
  border:2px solid #c8d0dc99;
  box-shadow:0 0 10px #00f6ff33;
  background:#0b0520;
}
.ks-tile img{width:100%;height:148px;object-fit:cover;display:block}
.ks-badge{
  position:absolute;top:6px;left:6px;z-index:2;
  padding:2px 7px;border-radius:4px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:#ff2bd6;color:#fff;box-shadow:0 0 8px #ff2bd6aa;
}
.ks-badge.novo{background:#00c8d8;color:#050014;box-shadow:0 0 8px #00f6ffaa}
.ks-plaque{
  display:block;padding:7px 6px 8px;text-align:center;
  font-family:"Audiowide",sans-serif;font-size:16px;line-height:1.15;color:#fff;
  background:linear-gradient(180deg,#1a1040,#0a0618);
  border-top:1px solid #00f6ff66;
  text-shadow:0 0 8px #00f6ff66;
}
/* below the fold */
.ks-rank{max-width:1280px;margin:64px auto 0;padding:0 16px}
.ks-board{
  background:linear-gradient(180deg,#12082c,#0a0618);
  border:1px solid #00f6ff55;border-radius:14px;padding:14px 16px 10px;
  box-shadow:0 0 16px #00f6ff22;
}
.ks-board h2{
  margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);font-weight:800;font-family:"Hind",sans-serif;
}
.ks-board ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px 18px}
.ks-board li{
  display:flex;justify-content:space-between;gap:8px;
  padding:5px 0;border-bottom:1px solid #00f6ff22;font-size:.86rem;font-weight:600;
}
.ks-board li b{color:var(--lilac);font-weight:700}
.ks-facts{
  max-width:1280px;margin:12px auto;padding:0 16px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.ks-fact{
  background:#12082c;border:1px solid #00f6ff44;border-radius:12px;padding:10px 12px;
}
.ks-fact strong{display:block;font-family:"Audiowide",sans-serif;color:var(--cyan);font-size:.95rem;margin-bottom:2px;line-height:1.2}
.ks-fact span{font-size:.8rem;color:var(--mute);font-weight:600}
.ks-wrap{max-width:980px;margin:0 auto;padding:22px 16px 48px}
.ks-crumb{font-size:.85rem;color:var(--mute);margin:0 0 12px}
.ks-crumb a{color:var(--cyan)}
.ks-pagehero{margin:0 0 18px;border-radius:16px;overflow:hidden;border:2px solid #c8d0dc77}
.ks-pagehero img{width:100%;height:280px;object-fit:cover}
.ks-wrap h1{
  font-family:"Audiowide",sans-serif;font-weight:400;font-size:clamp(1.7rem,3.2vw,2.4rem);
  margin:0 0 12px;line-height:1.15;text-shadow:0 0 12px #00f6ff44;
}
.ks-wrap h2{font-family:"Audiowide",sans-serif;font-weight:400;font-size:1.35rem;color:var(--cyan);margin:1.4em 0 .5em;line-height:1.25}
.ks-wrap h3{font-size:1.05rem;color:#ff9aee;margin:1.1em 0 .4em}
.ks-wrap p{margin:.7em 0}
.ks-wrap figcaption{font-size:.82rem;color:var(--mute);padding:6px 2px}
.ks-note{font-size:.9rem;color:var(--lilac);background:#12082c;border-left:3px solid var(--cyan);padding:10px 12px;border-radius:0 10px 10px 0}
.ks-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px;align-items:center}
.ks-hub{max-width:1280px;margin:0 auto;padding:18px 16px 56px}
.ks-hub h1{font-family:"Audiowide",sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 10px;line-height:1.2}
.ks-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center}
.ks-tools input{
  flex:1;min-width:220px;background:#0b0520;border:1px solid #00f6ff66;color:var(--foam);
  border-radius:10px;padding:10px 12px;font:inherit;
}
.ks-tab{
  height:36px;padding:0 12px;border-radius:999px;cursor:pointer;
  background:#12082c;border:1px solid #00f6ff55;color:var(--foam);font-weight:700;
}
.ks-tab[aria-selected="true"]{background:linear-gradient(90deg,#123,#306);border-color:#ff2bd6;color:#fff}
.ks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ks-slip{
  background:#12082c;border:1px solid #00f6ff44;border-radius:12px;padding:12px;
}
.ks-slip header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.ks-chip{
  width:40px;height:40px;border-radius:8px;flex:0 0 40px;
  display:grid;place-items:center;font-weight:800;font-size:.7rem;
  background:radial-gradient(circle at 35% 30%, #00f6ff, #3a1060);
  color:#050014;
}
.ks-slip h2{margin:0;font-size:1rem;color:#fff;font-family:"Audiowide",sans-serif;font-weight:400;line-height:1.2}
.ks-slip p{margin:0;font-size:.8rem;color:var(--mute)}
.ks-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ks-mini{
  font-size:.75rem;font-weight:800;text-decoration:none;border:1px solid #00f6ff77;
  background:#0b0520;color:var(--foam);padding:6px 8px;border-radius:8px;
}
.ks-shown{font-size:.85rem;color:var(--mute);margin:0 0 8px}
.ks-more{
  margin:14px 0 0;height:42px;padding:0 18px;border-radius:10px;cursor:pointer;
  background:var(--cta);color:#050014;font-weight:800;border:0;
}
.ks-slip.is-hide{display:none}
.ks-foot{
  background:#03000c;color:var(--mute);font-size:.86rem;
  border-top:1px solid #00f6ff33;padding:22px 16px 36px;margin-top:12px;
}
.ks-foot-inner{max-width:1280px;margin:0 auto;display:grid;gap:8px}
.ks-foot a{color:var(--cyan)}
.ks-18{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;
  background:#ff2bd6;color:#fff;font-weight:800;font-size:.75rem;margin-right:6px;
}
@media (max-width:1100px){
  .ks-copy h1{font-size:46px}
  .ks-row{grid-template-columns:repeat(4,1fr)}
  .ks-board ol{grid-template-columns:repeat(2,1fr)}
  .ks-mark{font-size:36px}
}
@media (max-width:720px){
  .ks-bezel-inner{flex-wrap:wrap}
  .ks-mark{font-size:32px}
  .ks-nav{width:100%;justify-content:flex-start}
  .ks-hero,.ks-hero img{height:240px}
  .ks-copy{left:14px;top:12px;max-width:90%}
  .ks-copy h1{font-size:32px}
  .ks-crt{position:relative;right:auto;top:auto;margin:8px;width:auto}
  .ks-promos{grid-template-columns:1fr}
  .ks-row{grid-template-columns:repeat(2,1fr)}
  .ks-facts{grid-template-columns:1fr 1fr}
  .ks-hero::after{background:linear-gradient(180deg,#050014cc 0%,#05001455 55%,transparent 80%)}
}
