/* dazard-official.com: casino-style front on top of Pico classless. Deep indigo, yellow actions, bold sans.
   Markup has no classes: everything is addressed by element and id. One content axis of 1140px. */
:root,[data-theme=dark]{
  --bg:#140f2e; --bar:#100b26; --panel:#1d1745; --panel-2:#261f57; --line:#352d6e;
  --ink:#ffffff; --text:#dcd8f2; --muted:#a9a2d1; --yellow:#ffbf1f; --yellow-2:#ffd257; --on-yellow:#1f1500; --violet:#7c5cff;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --radius:18px; --radius-sm:12px; --axis:1140px;
  --pico-font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pico-background-color:var(--bg); --pico-color:var(--text); --pico-muted-color:var(--muted);
  --pico-h1-color:var(--ink); --pico-h2-color:var(--ink); --pico-h3-color:var(--ink);
  --pico-primary:var(--yellow-2); --pico-primary-hover:#ffe08a; --pico-primary-underline:rgba(255,210,87,.45);
  --pico-primary-background:var(--yellow); --pico-primary-hover-background:var(--yellow-2); --pico-primary-inverse:var(--on-yellow);
  --pico-primary-border:var(--yellow); --pico-primary-hover-border:var(--yellow-2); --pico-primary-focus:rgba(255,191,31,.35);
  --pico-muted-border-color:var(--line); --pico-table-border-color:var(--line);
  --pico-card-background-color:var(--panel); --pico-border-radius:var(--radius-sm);
}
html,body{background:var(--bg)}
body>main{max-width:var(--axis);margin-inline:auto;padding-inline:var(--s5)}
body>header,body>footer{max-width:none;padding-inline:max(var(--s5),calc((100% - var(--axis)) / 2 + var(--s5)))}

/* type scale, set once */
h1,h2,h3{font-weight:800;letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);line-height:1.12;margin:0 0 var(--s3)}
h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);line-height:1.2;margin:var(--s7) 0 var(--s4)}
h3{font-size:1.15rem;line-height:1.3;margin:var(--s5) 0 var(--s3)}
p,li,dd{line-height:1.65}
:focus-visible{outline:2px solid var(--yellow-2);outline-offset:3px}

/* buttons: one pill style, yellow = action */
[role=button]{background:var(--yellow);border:1px solid var(--yellow);color:var(--on-yellow);font-weight:800;border-radius:999px;padding:.72rem 1.6rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;font-size:.92rem}
[role=button]:hover{background:var(--yellow-2);border-color:var(--yellow-2);color:var(--on-yellow)}

/* header bar */
body>header{position:sticky;top:0;z-index:30;background:rgba(16,11,38,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-block:0}
body>header nav{min-height:68px}
body>header nav ul:first-of-type{margin-left:0}
body>header nav img{display:block;width:112px;height:auto}
body>header nav a:not([role=button]){color:var(--ink);font-weight:600}
body>header nav a[aria-current=page]{color:var(--yellow-2)}
body>header nav a[data-kind=in]{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.55rem 1.2rem;text-transform:uppercase;font-weight:800;font-size:.85rem;letter-spacing:.02em}
body>header nav a[data-kind=in]:hover{border-color:var(--ink)}
body>header nav [role=button]{padding:.6rem 1.3rem;font-size:.85rem}

/* promo banner: text on the picture */
#hero{position:relative;margin:var(--s5) 0 0;border-radius:var(--radius);overflow:hidden;min-height:400px;display:flex;align-items:center;background:#0f0a26}
#hero>img{position:absolute;top:0;right:0;z-index:0;width:62%;height:100%;object-fit:cover;object-position:var(--pos,78% 50%)}
#hero::before{content:"";position:absolute;top:0;bottom:0;left:38%;width:26%;z-index:1;background:linear-gradient(90deg,#0f0a26 0%,rgba(15,10,38,.6) 45%,rgba(15,10,38,0) 100%)}
#hero>div{position:relative;z-index:2;max-width:560px;padding:var(--s7)}
#hero p{margin:0}
#hero p:nth-child(1){color:var(--yellow-2);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
#hero p:nth-child(2){color:#fff;font-weight:900;text-transform:uppercase;font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);line-height:1.02;margin:var(--s3) 0 var(--s2)}
#hero p:nth-child(3){color:#fff;font-weight:700;text-transform:uppercase;font-size:1.05rem}
#hero p:nth-child(4){margin:var(--s5) 0 var(--s3)}
#hero p:nth-child(4) [role=button]{font-size:1rem;padding:.85rem 2.2rem}
#hero p:nth-child(5) small{color:#c9c3e8}

/* category tabs */
#cats{margin:var(--s5) 0 0}
#cats ul{display:flex;gap:var(--s2);margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
#cats ul::-webkit-scrollbar{display:none}
#cats li{list-style:none;padding:0;margin:0;flex:0 0 auto}
#cats a,#cats a:is(:hover,:focus){margin:0;display:block;padding:.6rem 1.15rem;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.03em;text-decoration:none}
#cats a[aria-current]{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
#cats a:hover{border-color:var(--yellow)}

/* header: logo and buttons on the content axis, buttons on one baseline */
body>header nav{align-items:center}
body>header nav ul{margin:0!important;padding:0;align-items:center}
body>header nav li{padding-top:0!important;padding-bottom:0!important}
body>header nav ul:first-of-type li:first-child{padding-left:0!important}
body>header nav ul:last-child li:last-child{padding-right:0!important}
body>header nav a{margin:0!important}
body>header nav a[data-kind=in],body>header nav [role=button]{display:inline-flex;align-items:center;height:44px;padding:0 1.25rem;line-height:1;font-size:.85rem;box-sizing:border-box;vertical-align:middle}

/* page title card: heading and lead left, four facts right */
#intro{margin:var(--s6) 0 0;padding:var(--s6);border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s6);align-items:center}
#intro>div>p:first-child{margin:0 0 var(--s3)}
#intro>div>p:first-child small{color:var(--yellow-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
#intro h1{font-size:clamp(1.6rem,1.15rem + 1.3vw,2.2rem);margin:0 0 var(--s3)}
#intro>div>p:last-child{margin:0;color:var(--text)}
#intro dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:0}
#intro dl>div{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s4)}
#intro dt{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 var(--s1)}
#intro dd{margin:0;font-size:1.08rem;color:var(--ink);font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}

/* lobby rows: same header, six equal tiles, tall or square covers */
#slots,#more-slots,#live{margin:var(--s7) 0 0}
#more-slots,#live{margin-top:var(--s6)}
:is(#slots,#more-slots,#live)>div{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--s4)}
:is(#slots,#more-slots,#live) h2{margin:0;font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em}
:is(#slots,#more-slots,#live)>div a{color:var(--muted);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
:is(#slots,#more-slots,#live)>div a:hover{color:var(--yellow-2)}
:is(#slots,#more-slots,#live) ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4);margin:0;padding:0}
:is(#slots,#more-slots,#live) li{list-style:none;margin:0;padding:0;min-width:0}
:is(#slots,#more-slots,#live) li a{display:block;text-decoration:none;color:var(--ink)}
:is(#slots,#more-slots,#live) img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius-sm);transition:transform .15s ease}
[data-shape=tall] img{aspect-ratio:427/575}
[data-shape=square] img{aspect-ratio:1/1}
:is(#slots,#more-slots,#live) li a:hover img{transform:translateY(-3px)}
:is(#slots,#more-slots,#live) strong{display:block;font-size:.88rem;line-height:1.3;margin-top:var(--s2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#slots,#more-slots,#live) small{display:block;color:var(--muted);font-size:.78rem}

/* welcome pack cards */
#pack{margin:var(--s7) 0 0}
#pack h2{margin-top:0}
#pack>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
#pack article{margin:0;padding:var(--s5);border-radius:var(--radius);background:linear-gradient(160deg,#3a2a8f 0%,#231a5c 55%,#1b1449 100%);border:1px solid #4a3aa3;box-shadow:none;display:flex;flex-direction:column}
#pack article p{margin:0}
#pack article p:nth-child(1){color:var(--yellow-2);font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
#pack article p:nth-child(2){color:#fff;font-weight:900;font-size:2.4rem;line-height:1;margin:var(--s2) 0 var(--s2)}
#pack article p:nth-child(3){color:#fff;font-weight:700;line-height:1.4}
#pack article p:nth-child(4){margin:var(--s4) 0 var(--s4);color:#d6d0f5;font-size:.85rem}
#pack article p:nth-child(4) strong{display:inline-block;margin-left:var(--s2);padding:.15rem .6rem;border:1px dashed var(--yellow-2);border-radius:8px;color:var(--yellow-2);letter-spacing:.06em}
#pack article [role=button]{margin-top:auto;text-align:center}
#pack>p{margin:var(--s3) 0 0}
#pack>p small{color:var(--muted)}

/* reading part */
#content{margin:var(--s6) 0 0;padding:0;background:none;border:0;box-shadow:none;max-width:860px}
#content>p:first-of-type{font-size:1.06rem}
#content ul li::marker{color:var(--yellow)}
#content figure:has(>table){margin:var(--s5) 0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:auto;background:var(--panel)}
#content table{margin:0;font-variant-numeric:tabular-nums}
#content thead th{background:var(--panel-2);color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
#content th,#content td{padding:var(--s3) var(--s4);border-color:var(--line);background:transparent}
#content tbody th{color:var(--ink);font-weight:700}
#content tbody tr:last-child>*{border-bottom:0}
figure.shot{margin:var(--s5) 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
figure.shot img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
figure.shot figcaption{font-size:.82rem;color:var(--muted);margin:var(--s3) var(--s1) 0}
#faq-block details{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s4) var(--s5);margin:0 0 var(--s3)}
#faq-block details summary{font-weight:700;color:var(--ink)}
#faq-block details[open] summary{margin-bottom:var(--s3)}
#faq-block details p{margin:0}

/* closing promo strip */
#cta-end{margin:var(--s7) 0 0;padding:var(--s6) var(--s7);border-radius:var(--radius);background:linear-gradient(110deg,#3a2a8f 0%,#251c63 60%,#1b1449 100%);border:1px solid #4a3aa3;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
#cta-end p{margin:0}
#cta-end div p:nth-child(1){color:var(--yellow-2);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em}
#cta-end div p:nth-child(2){color:#fff;font-weight:900;font-size:1.6rem;text-transform:uppercase;line-height:1.15;margin:var(--s2) 0}
#cta-end div p:nth-child(3) small{color:#d6d0f5}
#cta-end>p{flex:0 0 auto}

/* casino-style footer */
body>footer{margin-top:var(--s8);padding-top:var(--s7);padding-bottom:var(--s7);background:var(--bar);border-top:1px solid var(--line)}
body>footer>nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:start}
body>footer>nav section{margin:0}
body>footer>nav p{margin:0 0 var(--s3);color:var(--ink);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em}
body>footer>nav ul{display:block;margin:0;padding:0}
body>footer>nav li{display:block;list-style:none;margin:0;padding:0}
body>footer>nav li a{display:inline-block;margin:0;padding:var(--s1) 0;color:var(--text);font-size:.92rem}
body>footer>ul{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s6) 0 var(--s5);padding:var(--s5) 0 0;border-top:1px solid var(--line)}
body>footer>ul li{list-style:none;margin:0;padding:.35rem .8rem;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.8rem;font-weight:700}
body>footer>p{color:var(--muted);font-size:.85rem;max-width:900px;margin:0 0 var(--s3)}
body>footer>p b{display:inline-block;margin-right:var(--s2);padding:.05rem .45rem;border:2px solid var(--muted);border-radius:50%;color:var(--ink);font-size:.75rem}
body>footer>small{color:var(--muted)}

/* cookie note */
#pref-note{position:fixed;left:0;right:0;bottom:var(--s4);z-index:40;box-sizing:border-box;width:calc(100vw - 2rem);max-width:44rem;margin:0 auto;padding:var(--s4) var(--s5);
  border-radius:var(--radius);background:var(--panel-2);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}
#pref-note[hidden]{display:none}
#pref-note p{margin:0;font-size:.88rem}
#pref-note button{margin:0;width:auto;background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow);font-weight:800;border-radius:999px;padding:.45rem 1.2rem}

/* tablet */
@media (max-width:1024px){
  #intro{grid-template-columns:minmax(0,1fr)}
  :is(#slots,#more-slots,#live) ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  #pack>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones: own composition */
@media (max-width:640px){
  body>main{padding-inline:var(--s4)}
  body>header,body>footer{padding-inline:var(--s4)}
  body>header nav{min-height:58px}
  body>header nav img{width:88px}
  body>header nav ul:last-child{gap:0}
  body>header nav ul:last-child li{padding-left:.28rem;padding-right:.28rem}
  body>header nav a[data-kind=in]{display:none}
  body>header nav [role=button]{padding:.45rem .8rem;font-size:.75rem}
  #hero{display:block;min-height:0;margin-top:var(--s4)}
  #hero>img{position:absolute;top:0;left:0;width:100%;height:250px;object-position:var(--pos-m,80% 30%)}
  #hero::before{left:0;width:100%;background:linear-gradient(180deg,rgba(15,10,38,0) 0,rgba(15,10,38,.2) 80px,rgba(15,10,38,.9) 190px,#0f0a26 240px)}
  #hero>div{max-width:none;padding:150px var(--s4) var(--s5)}
  #hero p:nth-child(2){font-size:2rem}
  #hero p:nth-child(4) [role=button]{display:block;text-align:center}
  #intro{padding:var(--s5) var(--s4);gap:var(--s5)}
  #intro dl{gap:var(--s2)}
  #intro dl>div{padding:var(--s3)}
  #intro dd{font-size:1rem}
  :is(#slots,#more-slots,#live) ul{display:flex;overflow-x:auto;scrollbar-width:none;gap:var(--s3);margin-right:calc(-1 * var(--s4));padding-right:var(--s4)}
  :is(#slots,#more-slots,#live) ul::-webkit-scrollbar{display:none}
  [data-shape=tall] li{flex:0 0 118px}
  [data-shape=square] li{flex:0 0 132px}
  body>header nav a[data-kind=in],body>header nav [role=button]{height:38px;padding:0 .9rem;font-size:.75rem}
  #pack>div{gap:var(--s3)}
  #pack article{padding:var(--s4)}
  #pack article p:nth-child(2){font-size:1.9rem}
  #pack article p:nth-child(3){font-size:.9rem}
  #pack article p:nth-child(4) strong{display:block;margin:var(--s1) 0 0;text-align:center}
  #pack article [role=button]{padding:.6rem .5rem;font-size:.8rem}
  h2{margin-top:var(--s6)}
  #cta-end{flex-direction:column;align-items:stretch;padding:var(--s5)}
  #cta-end div p:nth-child(2){font-size:1.3rem}
  #cta-end [role=button]{display:block;text-align:center}
  #content figure:has(>table){overflow:visible;border:0;background:none}
  #content table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #content table,#content table tbody,#content table tr,#content table th,#content table td{display:block;width:100%}
  #content table tr{border:1px solid var(--line);border-radius:var(--radius-sm);margin:0 0 var(--s3);padding:var(--s1) 0;background:var(--panel)}
  #content table tbody th{border-bottom:1px solid var(--line);padding:var(--s3) var(--s4)}
  #content table td{display:flex;justify-content:space-between;gap:var(--s4);border:0;padding:var(--s2) var(--s4);text-align:right}
  #content table td::before{content:attr(data-label);color:var(--muted);text-align:left;flex:0 0 45%}
  body>footer>nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  body>footer>nav section:last-child{grid-column:1/-1}
  #pref-note{bottom:var(--s3);padding:var(--s3) var(--s4)}
}

/* Pico gives nav items its own spacing and radius; the tabs are separate pills */
#cats li,#cats li:first-child,#cats li:last-child{padding:0}
#cats ul,#cats ul:first-of-type,#cats ul:last-of-type{margin:0}
#cats a{border-radius:999px!important}
body>header nav ul:first-of-type a{padding:0}
body>header nav img{min-width:88px}
/* phones: header keeps logo + sign up, the guide menu becomes a bottom tab bar */
@media (max-width:640px){
  body{padding-bottom:64px}
  body>header nav ul:last-child li:not(:last-child){display:none}
  body>header nav ul:last-child{position:static}
  body>header nav ul:last-child li:last-child{display:block}
  body>footer{margin-bottom:0}
}
#tabbar{display:none}
@media (max-width:640px){
  #tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:35;background:rgba(16,11,38,.97);border-top:1px solid var(--line);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom))}
  #tabbar ul{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin:0;padding:0}
  #tabbar li{list-style:none;margin:0;padding:0}
  #tabbar a{display:flex;align-items:center;justify-content:center;height:44px;border-radius:12px;color:var(--text);font-weight:700;font-size:.85rem;text-decoration:none}
  #tabbar a[aria-current]{background:var(--panel-2);color:var(--yellow-2)}
  #pref-note{bottom:76px}
}
#tabbar ul{margin:0!important}#tabbar li{padding:0!important}#tabbar a{margin:0!important}

/* game names: two lines max, every tile the same height */
:is(#slots,#more-slots,#live) strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#live strong{min-height:0}
/* reading part: full width, every section its own card */
#content{max-width:none;margin-top:var(--s7)}
#content>section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6) var(--s7);margin:0 0 var(--s4)}
#content>section>h2{margin-top:0}
#content>section>:last-child{margin-bottom:0}
#content>section#lead-in p{font-size:1.06rem;color:#ebe7fb}
#content figure:has(>table){background:var(--panel-2)}
figure.shot{background:var(--panel-2)}
#faq-block details{background:var(--panel-2)}
@media (max-width:640px){
  #content>section{padding:var(--s5) var(--s4)}
  #content table tr{background:var(--panel-2)}
}

/* footer v2: brand column + three link columns, one left edge everywhere */
#foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2.7fr);gap:var(--s7);align-items:start}
#foot-brand{margin:0}
#foot-brand img{display:block;width:128px;height:auto}
#foot-brand p{margin:var(--s4) 0 var(--s5);color:var(--muted);font-size:.92rem;line-height:1.6;max-width:300px}
#foot-brand [role=button]{display:inline-flex;align-items:center;height:44px;padding:0 1.4rem;font-size:.82rem}
body>footer #foot-top>nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin:0;padding:0}
body>footer #foot-top>nav p{margin:0 0 var(--s4);color:var(--ink);font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}
body>footer #foot-top>nav ul{display:block;margin:0!important;padding:0}
body>footer #foot-top>nav li{display:block;list-style:none;margin:0;padding:0!important}
body>footer #foot-top>nav li a{display:inline-block;margin:0!important;padding:var(--s1) 0!important;color:var(--text);font-size:.92rem;text-decoration:none}
body>footer #foot-top>nav li a:hover{color:var(--yellow-2)}
body>footer>ul{margin:var(--s6) 0 0;padding:var(--s5) 0 0}
body>footer>ul li{padding:.4rem .9rem;background:var(--panel);font-size:.78rem}
#foot-legal{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end}
#foot-legal p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.65;max-width:760px}
#foot-legal p b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:var(--s3);border:2px solid var(--muted);border-radius:50%;color:var(--ink);font-size:.72rem;vertical-align:middle}
#foot-legal small{color:var(--muted);white-space:nowrap}
#foot-legal small a{color:var(--muted)}
@media (max-width:900px){
  #foot-top{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  #foot-legal{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}
@media (max-width:640px){
  body>footer #foot-top>nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  body>footer #foot-top>nav section:last-child{grid-column:1/-1}
  #foot-legal small{white-space:normal}
}

/* game tiles are figures now */
:is(#slots,#more-slots,#live) figure{margin:0}
:is(#slots,#more-slots,#live) figcaption{padding:0}
:is(#slots,#more-slots,#live) li:hover img{transform:none}
#cats a[href^="#"]{background:var(--panel)}
#cats li:first-child a{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}