@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/bricolage.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope.woff2') format('woff2')}

:root{
  --paper:#ffffff; --ink:#141414; --head:#0f0e0e; --muted:#565656;
  --violet:#8800ff; --cobalt:#1551ff; --ember:#ff5000; --yellow:#ffcc00; --black:#000000;
  --fog:#f4f4f4; --line:#e7e7e7;
  --wrap:1500px;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
  --pad:clamp(56px,7vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--disp); color:var(--head); margin:0; letter-spacing:-.03em; line-height:.95; font-weight:800}
p{margin:0}
:focus-visible{outline:3px solid var(--violet); outline-offset:3px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}


.pill{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font-family:var(--body); font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:.85em 1.5em; border-radius:100px; border:2px solid var(--ink);
  background:var(--ink); color:#fff; transition:transform .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;
}
.pill:hover{transform:translate(-2px,-2px); background:var(--violet); border-color:var(--violet); color:#fff}
.pill--ghost{background:transparent; color:var(--ink)}
.pill--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.pill--sun{background:var(--yellow); border-color:var(--yellow); color:#0f0e0e}
.pill--sun:hover{background:#0f0e0e; border-color:#0f0e0e; color:#fff}
.pill svg{width:1em;height:1em}


.shead{display:flex; align-items:baseline; gap:.9rem; margin-bottom:2.4rem; flex-wrap:wrap}
.shead__sq{width:22px;height:22px;border-radius:5px;flex:none;align-self:center}
.shead__idx{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--muted)}
.shead__title{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.045em;line-height:.9}
.shead__note{margin-left:auto;max-width:34ch;color:var(--muted);font-size:1rem;font-weight:500;align-self:flex-end}


.topbar{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.topbar__in{display:flex; align-items:center; justify-content:space-between; height:74px; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--disp); font-weight:800; font-size:1.3rem; letter-spacing:-.04em; color:var(--head)}
.brand__mark{width:34px;height:34px;border-radius:9px;display:block}
.brand__dot{color:var(--violet)}
.nav{display:flex; align-items:center; gap:2rem}
.nav__link{font-weight:600; font-size:.98rem; letter-spacing:-.01em; position:relative; padding:.2em 0}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--violet);transition:right .25s ease}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.topbar__cta{display:flex;align-items:center;gap:1rem}
.burger{display:none; width:46px;height:46px;border:2px solid var(--ink);border-radius:12px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s}


.overlay{position:fixed; inset:0; z-index:90; background:var(--violet); color:#fff;
  transform:translateY(-100%); transition:transform .42s cubic-bezier(.7,0,.2,1); display:flex; flex-direction:column}
.overlay.is-open{transform:translateY(0)}
.overlay__top{display:flex; align-items:center; justify-content:space-between; height:74px; padding:0 clamp(20px,5vw,56px)}
.overlay__close{width:46px;height:46px;border:2px solid #fff;border-radius:12px;background:transparent;color:#fff;font-size:1.5rem;line-height:1}
.overlay__nav{flex:1; display:flex; flex-direction:column; justify-content:center; gap:.3rem; padding:0 clamp(20px,5vw,56px)}
.overlay__link{font-family:var(--disp); font-weight:800; font-size:clamp(2.4rem,10vw,4.4rem); letter-spacing:-.04em; color:#fff; line-height:1}
.overlay__link span{color:#ffcc00; margin-right:.5rem; font-size:.5em; vertical-align:super}
.overlay__foot{padding:clamp(20px,5vw,56px); font-weight:600; color:rgba(255,255,255,.85); border-top:1px solid rgba(255,255,255,.35)}
.overlay__foot a{text-decoration:underline}


.hero{border-bottom:1px solid var(--line)}
.hero__in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,64px); align-items:center;
  padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(48px,6vw,88px)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}
.hero__eyebrow b{width:10px;height:10px;border-radius:3px;background:var(--ember);display:inline-block}
.hero__title{font-size:clamp(3rem,8.4vw,6.7rem); letter-spacing:-.05em; line-height:.86}
.hero__title em{font-style:italic; color:var(--violet)}
.hero__title .u{background:var(--yellow); padding:0 .12em; border-radius:6px}
.hero__lede{margin:1.7rem 0 2.2rem; font-size:1.18rem; line-height:1.55; color:#2c2c2c; max-width:46ch; font-weight:500}
.hero__cta{display:flex; gap:.9rem; flex-wrap:wrap; align-items:center}
.hero__meta{display:flex; gap:2rem; margin-top:2.6rem; flex-wrap:wrap}
.hero__stat b{font-family:var(--disp);font-weight:800;font-size:2rem;letter-spacing:-.03em;display:block;color:var(--head)}
.hero__stat span{font-size:.9rem;color:var(--muted);font-weight:600}


.collage{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:12px; aspect-ratio:1/1.06}
.tile{border-radius:18px; overflow:hidden; position:relative; border:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center}
.tile img{width:100%;height:100%;object-fit:cover}
.tile--v{background:var(--violet)} .tile--c{background:var(--cobalt)} .tile--e{background:var(--ember)} .tile--y{background:var(--yellow)} .tile--k{background:var(--black)}
.tile--wide{grid-column:span 2}
.tile--tall{grid-row:span 2}
.tile__label{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.95;padding:16px}
.tile--v .tile__label,.tile--c .tile__label,.tile--k .tile__label{color:#fff}
.tile--e .tile__label,.tile--y .tile__label{color:#0f0e0e}
.tile__ic{width:64%;height:64%;object-fit:contain;border-radius:16px}
.tile__big{font-size:clamp(1.6rem,4vw,2.6rem)}


.cats{padding-top:var(--pad)}
.chips{display:flex; gap:.7rem; flex-wrap:wrap}
.chip{font-family:var(--body);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:.7em 1.25em; border-radius:100px; border:2px solid var(--ink); background:#fff; color:var(--ink);
  transition:background .16s,color .16s,transform .16s}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff}
.chip__n{opacity:.55; margin-left:.5em; font-weight:600}
.chip[aria-pressed="true"] .chip__n{opacity:.7}


.games{padding-top:2.4rem; padding-bottom:var(--pad)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:16px}
.card{border-radius:22px; padding:26px; display:flex; flex-direction:column; min-height:340px;
  position:relative; overflow:hidden; transition:transform .2s ease}
.card:hover{transform:translateY(-4px)}
.card.is-hidden{display:none}
.card--v{background:var(--violet); color:#fff} .card--c{background:var(--cobalt); color:#fff}
.card--k{background:var(--black); color:#fff} .card--e{background:var(--ember); color:#0f0e0e}
.card--y{background:var(--yellow); color:#0f0e0e}
.card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.card__icon{width:70px;height:70px;border-radius:16px;background:#fff;padding:8px;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.card__icon img{width:100%;height:100%;border-radius:9px}
.card__genre{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.4em .8em;border-radius:100px;border:1.5px solid currentColor;opacity:.85}
.card__name{font-size:1.7rem;letter-spacing:-.035em;margin-bottom:.5rem;color:inherit}
.card--v .card__name,.card--c .card__name,.card--k .card__name{color:#fff}
.card__rating{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;margin-bottom:.9rem}
.card__stars{letter-spacing:1px}
.card__count{font-weight:500;opacity:.75;font-size:.85rem}
.card__blurb{font-size:.97rem;line-height:1.5;font-weight:500;opacity:.92;margin-bottom:1.4rem}
.card__cta{margin-top:auto; display:inline-flex; align-items:center; gap:.5em; align-self:flex-start;
  font-weight:700; font-size:.95rem; padding:.7em 1.2em; border-radius:100px; background:#fff; color:#0f0e0e;
  border:2px solid #fff; transition:transform .16s,background .16s,color .16s}
.card__cta:hover{transform:translate(-2px,-2px)}
.card--y .card__cta,.card--e .card__cta{background:#0f0e0e;color:#fff;border-color:#0f0e0e}
.card--y .card__cta:hover,.card--e .card__cta:hover{background:#fff;color:#0f0e0e}
.games__empty{grid-column:1/-1;padding:3rem 1rem;text-align:center;color:var(--muted);font-weight:600;display:none}
.games__empty.show{display:block}


.ticker{background:var(--black); color:#fff; overflow:hidden; border-top:3px solid var(--yellow); border-bottom:3px solid var(--yellow)}
.ticker__track{display:flex; gap:0; white-space:nowrap; width:max-content; animation:scroll 34s linear infinite}
.ticker__set{display:flex; align-items:center}
.ticker__item{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);letter-spacing:-.03em;padding:.55em .5em;display:inline-flex;align-items:center}
.ticker__dot{color:var(--ember);margin:0 .5em;font-size:1.1em}
.ticker__item:nth-child(4n+2){color:var(--yellow)}
.ticker__item:nth-child(4n+4){color:var(--cobalt)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}


.voices{padding-top:var(--pad); padding-bottom:var(--pad); background:var(--fog)}
.voices__cols{columns:3 300px; column-gap:16px}
.bubble{break-inside:avoid; margin-bottom:16px; border-radius:20px 20px 20px 4px; padding:22px 24px;
  border:1px solid var(--line); background:#fff; position:relative}
.bubble--v{background:var(--violet);color:#fff;border-color:var(--violet)}
.bubble--c{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.bubble--e{background:var(--ember);color:#0f0e0e;border-color:var(--ember)}
.bubble--y{background:var(--yellow);color:#0f0e0e;border-color:var(--yellow)}
.bubble--k{background:var(--black);color:#fff;border-color:var(--black)}
.bubble__stars{font-size:.9rem;letter-spacing:1px;margin-bottom:.7rem}
.bubble__text{font-size:1.02rem;line-height:1.5;font-weight:500;margin-bottom:1.1rem}
.bubble__who{display:flex;align-items:center;gap:.7rem}
.bubble__av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:1rem;flex:none;background:rgba(255,255,255,.28)}
.bubble--e .bubble__av,.bubble--y .bubble__av,.bubble:not([class*="--"]) .bubble__av{background:rgba(0,0,0,.12)}
.bubble__name{font-weight:700;font-size:.95rem;line-height:1.1}
.bubble__role{font-size:.82rem;opacity:.75;font-weight:500}


.about{padding-top:var(--pad); padding-bottom:var(--pad)}
.about__in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center}
.about__art{border-radius:24px; overflow:hidden; position:relative; border:1px solid var(--line)}
.about__art img{width:100%; aspect-ratio:4/3.1; object-fit:cover}
.about__badge{position:absolute; left:20px; bottom:20px; background:var(--yellow); color:#0f0e0e; font-family:var(--disp); font-weight:800; letter-spacing:-.03em; padding:.5em .9em; border-radius:12px; font-size:1.05rem}
.about__title{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.04em;margin:1rem 0 1.3rem}
.about__p{color:#333;font-weight:500;font-size:1.08rem;line-height:1.6;margin-bottom:1.1rem}
.about__stats{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2rem}
.about__stat{border-left:3px solid var(--violet);padding-left:.9rem}
.about__stat:nth-child(2){border-color:var(--ember)}
.about__stat:nth-child(3){border-color:var(--cobalt)}
.about__stat b{font-family:var(--disp);font-weight:800;font-size:1.9rem;display:block;letter-spacing:-.03em;color:var(--head)}
.about__stat span{font-size:.88rem;color:var(--muted);font-weight:600}


.faq{padding-top:var(--pad); padding-bottom:var(--pad); background:var(--head); color:#fff}
.faq .shead__title{color:#fff}
.faq .shead__idx{color:rgba(255,255,255,.6)}
.faq .shead__note{color:rgba(255,255,255,.7)}
.faq__list{display:grid; gap:12px; max-width:920px}
.faq__item{border:1px solid rgba(255,255,255,.18); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.03)}
.faq__item[open]{border-color:var(--yellow)}
.faq__q{list-style:none; cursor:pointer; padding:1.15rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--disp); font-weight:700; font-size:1.2rem; letter-spacing:-.02em; color:#fff}
.faq__q::-webkit-details-marker{display:none}
.faq__sign{width:30px;height:30px;flex:none;border-radius:8px;background:var(--yellow);color:#0f0e0e;display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;transition:transform .25s}
.faq__item[open] .faq__sign{transform:rotate(45deg);background:var(--ember);color:#0f0e0e}
.faq__a{padding:0 1.4rem 1.3rem; color:rgba(255,255,255,.82); font-weight:500; line-height:1.6}


.contact{padding-top:var(--pad); padding-bottom:var(--pad)}
.contact__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,3vw,40px); align-items:stretch}
.contact__card{background:var(--cobalt); color:#fff; border-radius:24px; padding:clamp(28px,4vw,44px)}
.contact__card h2{color:#fff; font-size:clamp(2rem,4vw,2.9rem); letter-spacing:-.04em; margin-bottom:.7rem}
.contact__card p{color:rgba(255,255,255,.85); font-weight:500; margin-bottom:1.8rem}
.form{display:grid; gap:14px}
.field{display:grid; gap:.4rem}
.field label{font-weight:700; font-size:.85rem; letter-spacing:.01em}
.field input{font-family:var(--body); font-size:1rem; padding:.85em 1em; border-radius:12px; border:2px solid transparent; background:rgba(255,255,255,.14); color:#fff; width:100%}
.field input::placeholder{color:rgba(255,255,255,.6)}
.field input:focus{outline:none; border-color:var(--yellow); background:rgba(255,255,255,.22)}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; font-weight:500; color:rgba(255,255,255,.9); line-height:1.4}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--yellow)}
.consent a{text-decoration:underline}
.form__submit{margin-top:.4rem; background:var(--yellow); color:#0f0e0e; border:2px solid var(--yellow)}
.form__submit:hover{background:#0f0e0e; color:#fff; border-color:#0f0e0e}
.successMsg{display:none; margin-top:.6rem; background:rgba(255,255,255,.16); border-radius:12px; padding:.9em 1.1em; font-weight:600}
.successMsg.show{display:block}
.contact__info{background:var(--fog); border-radius:24px; padding:clamp(28px,4vw,44px); display:flex; flex-direction:column; gap:1.5rem}
.info__row{display:flex; gap:1rem; align-items:flex-start}
.info__k{width:44px;height:44px;flex:none;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.info__k svg{width:20px;height:20px}
.info__label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted);margin-bottom:.2rem}
.info__val{font-weight:600; font-size:1.05rem; color:var(--head); line-height:1.35}
.info__val a:hover{color:var(--violet)}
.info__note{margin-top:auto;border-top:1px solid var(--line);padding-top:1.2rem;color:var(--muted);font-weight:500;font-size:.92rem}


.foot{background:var(--head); color:#fff; padding-top:clamp(48px,6vw,80px)}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px)}
.foot__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:800;font-size:1.4rem;letter-spacing:-.04em;margin-bottom:1rem}
.foot__blurb{color:rgba(255,255,255,.7);font-weight:500;max-width:34ch;line-height:1.6;margin-bottom:1.4rem}
.foot__nap{color:rgba(255,255,255,.78);font-weight:500;line-height:1.7;font-size:.95rem}
.foot__nap a:hover{color:var(--yellow)}
.foot__col h4{font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:0;margin-bottom:1rem;color:var(--yellow)}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot__col a{color:rgba(255,255,255,.75);font-weight:500;font-size:.95rem}
.foot__col a:hover{color:#fff}
.foot__bar{border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(40px,5vw,64px);padding:1.6rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(255,255,255,.55);font-size:.88rem;font-weight:500}
.foot__colophon{color:rgba(255,255,255,.4)}


.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:80; background:#fff; color:var(--ink);
  border:2px solid var(--ink); border-radius:18px; padding:1.2rem 1.4rem; display:none;
  box-shadow:8px 8px 0 var(--violet); max-width:560px; margin:0 auto}
.cookie.show{display:block}
.cookie__t{font-family:var(--disp);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.35rem}
.cookie p{font-size:.92rem;color:#333;font-weight:500;margin-bottom:1rem;line-height:1.5}
.cookie p a{text-decoration:underline;font-weight:700}
.cookie__btns{display:flex;gap:.7rem;flex-wrap:wrap}
.cookie__btns .pill{font-size:.9rem;padding:.65em 1.2em}


.docintro{background:var(--violet); color:#fff; padding:clamp(48px,7vw,96px) 0}
.docintro__idx{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.8rem}
.docintro h1{font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.04em;color:#fff;max-width:18ch}
.docintro p{margin-top:1.1rem;color:rgba(255,255,255,.88);font-weight:500;font-size:1.1rem;max-width:56ch}
.doc{padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(48px,6vw,80px)}
.doc__in{max-width:820px}
.doc h2{font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.03em;margin:2.4rem 0 .9rem}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.2rem;letter-spacing:-.02em;margin:1.6rem 0 .5rem;font-weight:700}
.doc p,.doc li{color:#333;font-weight:500;line-height:1.7;margin-bottom:.8rem}
.doc ul{padding-left:1.2rem;margin-bottom:1rem}
.doc li{margin-bottom:.5rem}
.doc__meta{display:inline-block;background:var(--fog);border:1px solid var(--line);border-radius:100px;padding:.5em 1.1em;font-weight:700;font-size:.85rem;color:var(--muted);margin-bottom:2rem}
.doc a{color:var(--violet);font-weight:600;text-decoration:underline}


.nf{min-height:64vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--pad) 0}
.nf__num{font-family:var(--disp);font-weight:800;font-size:clamp(6rem,22vw,16rem);letter-spacing:-.05em;line-height:.8;color:var(--violet)}
.nf__t{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;margin:1rem 0 .8rem}
.nf p{color:var(--muted);font-weight:500;margin-bottom:1.8rem}


.quiz{padding-top:var(--pad); padding-bottom:var(--pad); background:var(--fog)}
.quiz__stage{position:relative; max-width:900px; margin:0 auto; background:#fff; border:2px solid var(--ink); border-radius:26px; padding:clamp(24px,4vw,46px); box-shadow:10px 10px 0 var(--violet)}
.quiz__prog{display:flex; align-items:center; gap:.55rem; margin-bottom:1.9rem}
.quiz__dot{width:38px; height:9px; border-radius:100px; background:var(--line); flex:none; transition:background .2s}
.quiz__dot.is-active{background:var(--violet)}
.quiz__dot.is-done{background:var(--ember)}
.quiz__step{margin-left:auto; font-weight:700; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.quiz__q{display:none}
.quiz__q.is-active{display:block}
.quiz__qtext{font-family:var(--disp); font-weight:800; font-size:clamp(1.55rem,4vw,2.7rem); letter-spacing:-.035em; line-height:1; margin-bottom:1.6rem; max-width:22ch}
.quiz__opts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.quiz__opt{display:flex; align-items:center; gap:.85rem; text-align:left; font-family:var(--body); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; line-height:1.25; padding:1.15em 1.2em; border-radius:18px; border:2px solid transparent; transition:transform .16s ease, box-shadow .16s ease}
.quiz__opt--v{background:var(--violet); color:#fff}
.quiz__opt--c{background:var(--cobalt); color:#fff}
.quiz__opt--e{background:var(--ember); color:#0f0e0e}
.quiz__opt:hover,.quiz__opt:focus-visible{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink)}
.quiz__key{font-family:var(--disp); font-weight:800; font-size:1.05rem; width:36px; height:36px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.26)}
.quiz__opt--e .quiz__key{background:rgba(0,0,0,.15)}
.quiz__result{display:none; border-radius:20px; padding:clamp(24px,4vw,40px); color:#fff; background:var(--violet)}
.quiz__result.is-active{display:block}
.quiz__result--v{background:var(--violet); color:#fff}
.quiz__result--c{background:var(--cobalt); color:#fff}
.quiz__result--e{background:var(--ember); color:#0f0e0e}
.quiz__rlabel{display:inline-block; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; opacity:.85; margin-bottom:.5rem}
.quiz__rtype{font-family:var(--disp); font-weight:800; font-size:clamp(2.6rem,7vw,4.6rem); letter-spacing:-.04em; line-height:.9; color:inherit; margin-bottom:.7rem}
.quiz__rdesc{font-weight:500; font-size:1.1rem; line-height:1.55; max-width:52ch; margin-bottom:1.7rem; opacity:.95}
.quiz__rfoot{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.quiz__rgenre{font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; opacity:.85}
.quiz__rchip{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; font-size:1.15rem; padding:.4em 1em; border-radius:100px; background:#fff; color:#0f0e0e; transition:transform .16s}
.quiz__rchip:hover{transform:translate(-2px,-2px)}
.quiz__restart{margin-left:auto; font-family:var(--body); font-weight:700; font-size:.92rem; padding:.6em 1.2em; border-radius:100px; background:transparent; border:2px solid currentColor; color:inherit; transition:background .16s,color .16s}
.quiz__result--v .quiz__restart:hover,.quiz__result--c .quiz__restart:hover{background:#fff; color:#0f0e0e; border-color:#fff}
.quiz__result--e .quiz__restart:hover{background:#0f0e0e; color:#fff; border-color:#0f0e0e}


.cloud{padding-top:var(--pad); padding-bottom:var(--pad)}
.cloud__wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.55rem .7rem; max-width:1080px; margin:0 auto; text-align:center}
.cloud__tag{font-family:var(--disp); font-weight:700; letter-spacing:-.03em; line-height:1; padding:.26em .5em; border-radius:14px; display:inline-flex; align-items:center; transition:transform .16s ease}
.cloud__tag:hover,.cloud__tag:focus-visible{transform:translateY(-4px)}
.cloud__tag--xl{font-size:clamp(2.3rem,6vw,4.2rem); font-weight:800}
.cloud__tag--l{font-size:clamp(1.7rem,4vw,2.9rem); font-weight:800}
.cloud__tag--m{font-size:clamp(1.25rem,2.6vw,1.9rem)}
.cloud__tag--s{font-size:clamp(1rem,1.8vw,1.3rem)}
.cloud__tag--v{background:var(--violet); color:#fff}
.cloud__tag--c{background:var(--cobalt); color:#fff}
.cloud__tag--e{background:var(--ember); color:#0f0e0e}
.cloud__tag--y{background:var(--yellow); color:#0f0e0e}
.cloud__tag--k{background:var(--black); color:#fff}
.cloud__tag--o{background:transparent; color:var(--ink); border:2px solid var(--ink)}
.cloud__tag--u{background:transparent; color:var(--violet)}
.cloud__tag--u:hover{color:var(--ember)}
.cloud__tag--rl{transform:rotate(-3deg)}
.cloud__tag--rr{transform:rotate(3deg)}


@media(max-width:720px){
  .quiz__opts{grid-template-columns:1fr}
  .quiz__restart{margin-left:0; width:100%; justify-content:center; text-align:center}
}
@media(max-width:1024px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media(max-width:900px){
  .nav{display:none}
  .topbar__cta .pill--head{display:none}
  .burger{display:flex}
  .hero__in{grid-template-columns:1fr; gap:36px}
  .collage{max-width:520px; margin:0 auto; width:100%}
  .about__in{grid-template-columns:1fr; gap:32px}
  .contact__in{grid-template-columns:1fr}
  .voices__cols{columns:2 260px}
}
@media(max-width:600px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr}
  .voices__cols{columns:1}
  .shead__note{margin-left:0; width:100%}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__bar{flex-direction:column}
  .hero__meta{gap:1.4rem}
}
@media(max-width:380px){
  .foot__grid{grid-template-columns:1fr}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .pill{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none; transform:none}
  *{transition:none !important}
}