/* Huggiverse "outlined sticker" theme, distilled from
   huggingface.co/spaces/multimodalart/jev-decision-index (built on the
   HF Huggiverse brand assets, huggingface.co/spaces/Chunte/HFBA).
   Fonts are not bundled; load them before this file:
   <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=IBM+Plex+Mono:wght@400;500&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=Chewy&display=swap" rel="stylesheet"> */

:root{--bg:#E9E6DD;--surface:#FBF8F1;--ink:#232323;--soft:#55524B;--muted:#8C8C8C;--line:#D8D3C8;--paper:#FFF1C6;
  --yellow:#FFD21E;--orange:#FF9D00;--blue:#3B7CF6;--red:#EF3E36;--purple:#A855F7;--green:#3E8E5E;
  --blue-soft:#B9C7FF;--pink:#F87171;--other:#BBBBBB;
  --tint-blue:#DCE7FB;--tint-purple:#F1DDF8;--tint-green:#DDEFE3;--tint-orange:#FFE7BF;--tint-neutral:#ECEAE2;
  --row-hi:#F3EFE3;--row-hover:#FFFCEF;--grid:#E1DCD0;--bar-base:#B8B2A6;
  --display:'Chewy','Source Sans 3',cursive;
  --body:'Source Sans 3',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--body)}
a{color:var(--ink)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
code{font-family:var(--mono);font-size:.9em;background:var(--row-hi);padding:1px 5px;border-radius:4px}
mark{background:var(--yellow);color:inherit;border-radius:3px;padding:0 1px}
main{max-width:1180px;margin:auto;padding:0 28px}
main{padding-bottom:80px}
h1,h2,.display{font-family:var(--display);font-weight:400;margin:0}
h2{font-size:30px}
h3{font-size:17px;margin:0 0 6px}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.meta{font-family:var(--mono);font-size:12px;color:var(--soft);letter-spacing:.03em}
.meta a{color:var(--soft)}
.muted{color:var(--muted)}
.switch{display:inline-flex;background:var(--surface);border:2px solid var(--ink);border-radius:999px;padding:4px;box-shadow:3px 3px 0 var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.switch a{text-decoration:none;padding:6px 18px;border-radius:999px;color:var(--soft)}
.switch a.on{background:var(--yellow);color:var(--ink);font-weight:500}
.switch a:not(.on):hover{color:var(--ink)}
.hero{text-align:center;margin:34px 0 14px}
.hero-row{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.hero-huggy{width:clamp(110px,13vw,168px);height:auto}
.hero h1{font-size:clamp(44px,7vw,82px);line-height:1}
.hero h1 mark{padding:0 .1em;border-radius:4px}
.hero p{max-width:700px;margin:22px auto 0;font-size:19px}
.hero .meta{margin-top:14px}
.underline{position:relative;display:inline-block}
.underline::after{content:'';position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;background:var(--yellow);z-index:-1;border-radius:6px;transform:rotate(-1deg)}
.subnav{position:sticky;top:0;z-index:30;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px;padding:10px 12px;margin:0 -28px 22px;background:rgba(233,230,221,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.subnav a{color:var(--soft);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--ink);border-bottom-color:var(--yellow)}
.head[id]{scroll-margin-top:52px}
.tile.key{background:var(--yellow)}
.tile.key span{color:#6b5a09}
.stat .n{font-family:var(--display);font-size:30px;line-height:1}
.stat.y{background:var(--yellow)}
.stat.b{background:var(--blue);color:#fff}
.stat.b .l{color:#E8EEFF}
.stat.p{background:var(--paper)}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:46px 0 16px;flex-wrap:wrap}
.head p{margin:0;font-size:15px;color:var(--soft);max-width:620px}
.panel{background:var(--surface);border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.panel.pad{padding:18px 22px 16px}
.panel-head{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:10px 14px;background:var(--yellow);border-bottom:2px solid var(--ink);display:flex;justify-content:space-between}
.empty{padding:34px;text-align:center;color:var(--soft);font-family:var(--mono);font-size:13px}
.pill{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px;background:#fff;white-space:nowrap;display:inline-block}
.pill.yes{background:var(--yellow)}
.pill.no{background:var(--tint-neutral);color:var(--soft)}
.pill.blue{background:var(--tint-blue)}
.pill.purple{background:var(--tint-purple)}
.pill.green{background:var(--tint-green)}
.pill.orange{background:var(--tint-orange)}
.pill.ink{background:var(--ink);color:#fff}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;padding:2px 8px;border-radius:999px;border:1.5px solid var(--ink);background:var(--surface);white-space:nowrap;display:inline-block}
.badge.new{background:var(--green);color:#fff;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.badge.soon{background:var(--orange);border-style:dashed;font-weight:500}
.badge.ink{background:var(--ink);color:#fff}
.badge.yellow{background:var(--yellow)}
.badge.orange{background:var(--orange)}
.badge.purple{background:var(--purple);color:#fff}
.badge.blue-soft{background:var(--blue-soft)}
.badge.paper{background:var(--paper)}
.badge.pink{background:var(--pink)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip-label{font-family:var(--mono);font-size:11.5px;color:var(--soft);letter-spacing:.04em;text-transform:uppercase;margin-right:4px}
.chip{font-family:var(--mono);font-size:12.5px;border:2px solid var(--ink);border-radius:999px;padding:6px 14px;background:#fff;color:var(--soft);cursor:pointer;box-shadow:2px 2px 0 var(--ink);display:inline-flex;align-items:center;gap:7px;transition:transform .08s}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink));border:1.5px solid var(--ink);display:inline-block}
.chip:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.chip.on{background:var(--yellow);color:var(--ink)}
.chip.flat{font-size:12px;padding:5px 12px;color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,var(--bg));border:1.5px solid transparent;box-shadow:none;transition:background .12s,color .12s,border-color .12s}
.chip.flat:hover{border-color:var(--ink);transform:none}
.chip.flat.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.flat.on i{border-color:#fff}
.btn{font-family:var(--mono);font-size:13px;text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:9px 18px;background:var(--surface);box-shadow:3px 3px 0 var(--ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--yellow)}
.btn.small{font-size:11px;padding:2px 10px;border-width:1.5px;box-shadow:none}
.btn.small:hover{background:var(--ink);color:#fff;transform:none;box-shadow:none}
.btn .cnt{background:var(--ink);color:#fff;border-radius:999px;padding:1px 8px;font-size:11.5px}
.search{display:flex;align-items:center;gap:12px;max-width:820px;margin:0 auto;background:var(--surface);border:2px solid var(--ink);border-radius:999px;padding:11px 20px;box-shadow:4px 4px 0 var(--ink)}
.search:focus-within{box-shadow:4px 4px 0 var(--blue);border-color:var(--blue)}
.search input{flex:1;border:none;outline:none;background:transparent;font:17px var(--body);color:var(--ink);min-width:0}
.search input::placeholder{color:var(--muted)}
.kbd{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
table{width:100%;border-collapse:collapse}
th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:left;background:var(--yellow);color:var(--ink);padding:12px 14px;border-bottom:2px solid var(--ink);white-space:nowrap}
th[data-dir]::after{content:"\2191";margin-left:5px}
th[data-dir=desc]::after{content:"\2193"}
td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--row-hover)}
.rail i.base{background:var(--bar-base)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:12px;color:var(--soft);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i,.swatch{width:11px;height:11px;border:2px solid var(--ink);border-radius:3px;display:inline-block;flex:none}
.bar{stroke:var(--ink);stroke-width:1.5}
figcaption{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);margin-bottom:8px}
dialog.sticker{border:2.5px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--ink);background:var(--bg);padding:0;width:min(960px,94vw);max-height:90vh;color:var(--ink)}
dialog.sticker::backdrop{background:rgba(35,35,35,.45)}
dialog.sticker .dlg-body{padding:22px 26px 26px;overflow-y:auto;max-height:calc(90vh - 5px)}
footer{margin-top:54px;border-top:2px solid var(--ink);padding-top:16px;font-family:var(--mono);font-size:12px;color:var(--soft);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--soft)}
@media (max-width:640px){
  main{padding-left:16px;padding-right:16px}
  main{padding-bottom:60px}
  .subnav{margin:0 -16px 18px;gap:6px 16px;font-size:11px}
  .hero p{font-size:17px}
  .head{margin-top:36px}
  .panel.pad{padding:16px 16px 14px}
  td,th{padding:10px 10px}
}