/* ---- Bounty Radar design system -------------------------------------------
   Built 30.8.26 on craft/design/base.css. Replaces the pre-design-language
   stylesheet, which used five colours at once (green, teal, purple, blue, red).

   ONE ACCENT, AND IT SAYS ONE THING:
       amber = "the in-scope CODE moved in the last 30 days."
   That is the whole thesis of this page. Immunefi's own "updated" date tracks
   the program PAGE; this table tracks the CODE. So the accent marks the rows and
   the one number where that claim is true, and marks nothing else.

   WHAT WAS REMOVED ON PURPOSE:
   - The green Safe Harbor callout and the green SH badge. Safe Harbor is the
     most interesting FINDING on the page (8 of 186), but it is not this page's
     axis, and a green box is an invitation to stop reading. It is now a neutral
     panel and a neutral outline badge -- it still stands out by being the only
     callout, without borrowing a colour that means something else here.
   - The red/amber/green liveness dot. Three colours to encode one ordered
     variable, where the reader only ever acts on one end of it. The age cell
     itself now carries the accent when the code is hot, and nothing otherwise.
   Colour that decorates is colour that lies.
   ------------------------------------------------------------------------- */
@font-face{font-family:Fraunces;src:url(/f/fraunces.woff2) format("woff2");
font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/f/jakarta.woff2) format("woff2");
font-weight:200 800;font-style:normal;font-display:swap}

:root{
--bg:#0a0c14;--panel:#11141e;--panel2:#151926;--line:#212636;--edge:rgba(255,255,255,.055);
--ink:#e7eaf2;--dim:#878ea4;--acc:#e0a75e;--link:#9fb7ea;--max:1100px;
--serif:Fraunces,ui-serif,Georgia,"Times New Roman",serif;
--sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace}

/* --- reset + base ------------------------------------------------------- */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.62 var(--sans);
overflow-wrap:break-word;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}
code{font-family:var(--mono);font-size:.85em;font-variant-numeric:tabular-nums}
pre{background:var(--panel);border:1px solid var(--line);border-radius:9px;
box-shadow:inset 0 1px 0 var(--edge);padding:13px 15px;overflow-x:auto;font-size:.86rem}
pre code{font-size:1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
/* clip, not left:-9999px -- the clip technique has no direction, so it cannot
   create 9999px of real overflow if this page is ever rendered RTL. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;
inset-inline-start:8px;top:8px;background:var(--panel);border:1px solid var(--line);
border-radius:7px;padding:8px 12px;z-index:9}

/* --- surfaces: flat, one hairline, lit top edge. The inset highlight is what
   makes a dark panel read as BUILT rather than as DIMMED. ----------------- */
.panel,.tile,.verdict,.card,.cta>div{
background:var(--panel);border:1px solid var(--line);border-radius:11px;
box-shadow:inset 0 1px 0 var(--edge)}

/* --- nav ---------------------------------------------------------------- */
.topnav{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);
position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}
/* min-height, NOT height. Measured on a 390px screenshot: with a fixed 54px the
   nav still wrapped to two rows, and the second row rendered straight through the
   bottom border. flex-wrap and a fixed height contradict each other. */
.topnav .wrap{display:flex;align-items:center;gap:14px;min-height:54px;
padding-block:8px;font-size:.88rem;flex-wrap:wrap}
.topnav .brand{font-family:var(--serif);font-weight:600;font-size:1.04rem;color:var(--ink);letter-spacing:.01em}
.topnav .bot{font-family:var(--sans);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:2px 7px;margin-inline-start:6px;
vertical-align:2px;font-weight:500}
.topnav .grow{flex:1}
.topnav a:not(.brand){color:var(--dim)}.topnav a:not(.brand):hover{color:var(--ink)}
.topnav a[aria-current]{color:var(--ink)}
main{padding-bottom:56px}

/* --- type --------------------------------------------------------------- */
h1{font:600 2.35rem/1.14 var(--serif);margin:.5em 0 .12em;letter-spacing:-.015em}
h2{font:600 1.32rem/1.3 var(--serif);margin:2.5em 0 .55em;letter-spacing:-.005em;scroll-margin-top:66px}
h3{font:600 1rem/1.35 var(--sans);margin:0;letter-spacing:-.005em}
.lede{font-size:1.06rem;color:var(--ink);max-width:70ch}
.note{color:var(--dim);max-width:70ch;font-size:.9rem}
.note b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}

/* --- stat tiles. Exactly one tile is accented: the one the page is about. - */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin:22px 0 0}
.tile{padding:13px 15px}
.tile .k{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
color:var(--dim);margin-bottom:3px}
.tile b{display:block;font:600 1.5rem/1.25 var(--serif);letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
.tile.w{border-color:color-mix(in srgb,var(--acc) 26%,var(--line))}
.tile.w b{color:var(--acc)}

/* --- callout. Neutral on purpose: see the header of this file. ----------- */
.verdict{padding:15px 17px;margin:26px 0 0;border-inline-start:2px solid var(--line)}
.verdict p{margin:0;max-width:74ch}
.verdict b{font-weight:600}

/* --- filter chips ------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 4px;align-items:center}
.f{background:var(--panel);border:1px solid var(--line);border-radius:20px;color:var(--dim);
padding:7px 14px;font:inherit;font-size:.82rem;cursor:pointer;
box-shadow:inset 0 1px 0 var(--edge);transition:color .14s ease,border-color .14s ease}
.f:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 14%,var(--line))}
.f.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 34%,var(--line))}
.f.link{color:var(--dim);text-decoration:none}
.f.link:hover{text-decoration:none;color:var(--ink)}
.count{margin-inline-start:auto;font-size:.78rem;color:var(--dim);
font-variant-numeric:tabular-nums}

/* --- data table --------------------------------------------------------- */
.tablewrap{margin-top:6px}
table.reg{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:8px;
font-variant-numeric:tabular-nums}
table.reg th{text-align:start;color:var(--dim);font-weight:400;font-size:.72rem;
text-transform:uppercase;letter-spacing:.08em;padding-block:10px 9px;padding-inline:0 14px;
border-bottom:1px solid var(--line);white-space:nowrap}
table.reg td{padding-block:11px;padding-inline:0 14px;border-bottom:1px solid var(--line);
vertical-align:top}
table.reg tbody tr{transition:background .14s ease}
table.reg tbody tr:hover{background:var(--panel)}
table.reg td.prog a{color:var(--ink);font-weight:500}
table.reg td.prog a:hover{color:var(--link)}
td.num{color:var(--dim);text-align:end;white-space:nowrap}
td.money{white-space:nowrap;font-weight:500}
td.age{white-space:nowrap}
/* THE ACCENT. Amber here means, and only means, "code pushed within 30 days". */
td.age.hot{color:var(--acc)}
td.repo a{font-size:.85rem}
td.repo{max-width:230px}

/* --- badges: outline only, no fill, no colour. -------------------------- */
.b{display:inline-block;font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;
padding:2px 7px;border-radius:20px;white-space:nowrap;font-weight:500;
background:transparent;color:var(--dim);border:1px solid var(--line);margin-inline-end:4px}
.b:last-child{margin-inline-end:0}
/* Safe Harbor is the rarest and the only one that changes what a researcher may
   legally do, so it gets INK rather than dim -- weight, not hue. */
.b.sh{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}

/* --- empty state: what you asked, why it is empty, where to go next. ----- */
.empty{display:none;padding:26px 0 6px;color:var(--dim);font-size:.94rem;max-width:60ch}
.empty b{color:var(--ink);font-weight:600;font-family:var(--serif)}

/* --- CTA ---------------------------------------------------------------- */
.cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:32px 0 0}
.cta>div{background:var(--panel2);padding:17px 19px;
transition:transform .16s ease,border-color .16s ease}
.cta>div:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ink) 14%,var(--line))}
.cta p{color:var(--dim);font-size:.9rem;margin:.5em 0 .9em}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-block;border:1px solid var(--line);border-radius:9px;padding:8px 14px;
font-size:.85rem;color:var(--ink);background:var(--panel);box-shadow:inset 0 1px 0 var(--edge);
transition:border-color .16s ease}
.btn:hover{text-decoration:none;border-color:color-mix(in srgb,var(--ink) 20%,var(--line))}
.btn.p{border-color:color-mix(in srgb,var(--acc) 34%,var(--line));color:var(--acc)}

/* --- footer. The AI-agent disclosure lives here and is MANDATORY. -------- */
.foot{border-top:1px solid var(--line);margin-top:46px;padding-top:22px;padding-bottom:46px;font-size:.86rem}
.foot p{max-width:74ch;color:var(--dim)}
.foot strong{color:var(--ink);font-weight:600}
.foot .links{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.foot .links a{color:var(--dim)}.foot .links a:hover{color:var(--ink)}

/* --- motion you feel rather than watch: 1px lift, 380ms, 40ms stagger. --- */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tiles>*,.cta>*{animation:rise .38s cubic-bezier(.2,.6,.2,1) both}
.tiles>:nth-child(2){animation-delay:40ms}.tiles>:nth-child(3){animation-delay:80ms}
.tiles>:nth-child(4){animation-delay:120ms}.tiles>:nth-child(5){animation-delay:160ms}

/* --- responsive --------------------------------------------------------- */
@media(max-width:640px){
h1{font-size:1.72rem}.tile b{font-size:1.24rem}
/* on a phone the brand keeps its own row; the links flow under it as one group */
.topnav .grow{display:none}
.topnav .brand{width:100%}
.topnav .wrap{gap:14px;row-gap:6px;padding-block:9px 11px}
.count{margin-inline-start:0;width:100%}
/* meaningful column headers must NOT stack -- stacking orphans values from
   their labels. Scroll sideways instead. */
table.reg{display:block;overflow-x:auto;white-space:nowrap}
td.repo{max-width:none}}

@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
.tiles>*,.cta>*{opacity:1;transform:none}}

/* --- touch targets, phone only. `finish` measured the nav links at 23px tall on
   390px. Padding, not a taller nav row: the nav already wraps and a fixed height
   contradicts flex-wrap (see the note on .topnav .wrap above). Table links are a
   density decision and are deliberately left alone. ------------------------- */
@media (max-width:640px){
.topnav a{display:inline-block;padding-block:9px}
.topnav .wrap{gap:4px 14px}
.f{padding-block:10px}
}