/* Charts hub - generated by tools/import_charts_hub.py */

  .mk-charts{
    /* palette lifted from the homepage so the two pages read as one site */
    --tang:#2f4f9e; --tangD:#1d2b53; --ink:#1d2b53; --soft:#56617c;
    --line:#d6deeb; --green:#2BB673;
    --paper:#f6f9fd; --tile:#ffffff; --tint:#e8eef9;
    --sans:'Lexend',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --serif:'Lexend',-apple-system,sans-serif;
  }
  .mk-charts,.mk-charts *,.mk-charts *::before,.mk-charts *::after{box-sizing:border-box}

  
  .mk-charts .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  .mk-charts h1,.mk-charts h2,.mk-charts h3{font-family:var(--serif);font-weight:600}
  .mk-charts .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mk-charts a{color:var(--tangD)}
  .mk-charts a:focus-visible,.mk-charts button:focus-visible{outline:2px solid var(--tang);outline-offset:2px}
  .mk-charts [hidden]{display:none !important}

  .mk-charts .masthead{padding:34px 0 26px;border-bottom:1px solid var(--line);background:var(--paper)}
  .mk-charts .crumbs{font-size:13.5px;color:var(--soft);margin:0 0 18px}
  .mk-charts .crumbs a{text-decoration:none}
  .mk-charts .crumbs a:hover{text-decoration:underline}
  .mk-charts h1{font-family:var(--serif);font-weight:700;font-size:clamp(32px,5vw,48px);
    line-height:1.12;letter-spacing:-.5px;margin:0 0 14px;max-width:26ch}
  .mk-charts .standfirst{font-size:clamp(16px,2.1vw,18.5px);color:var(--soft);margin:0 0 12px;max-width:none}
  .mk-charts .standfirst b{color:var(--ink);font-weight:600}
  .mk-charts .byline{font-size:14px;color:var(--soft);margin:0 0 24px}
  .mk-charts .byline b{color:var(--ink);font-weight:600}

  .mk-charts .controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .mk-charts .searchbox{position:relative;flex:1 1 280px;max-width:380px}
  .mk-charts .searchbox svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
    width:17px;height:17px;stroke:var(--soft);fill:none;stroke-width:2}
  .mk-charts input[type=search]{width:100%;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);
    background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px 12px 38px;appearance:none}
  .mk-charts input[type=search]::placeholder{color:var(--soft)}
  .mk-charts input[type=search]:focus{outline:2px solid var(--tang);outline-offset:1px;border-color:var(--tang)}
  .mk-charts .count{font-size:14.5px;color:var(--soft);white-space:nowrap;margin:0}
  .mk-charts .count strong{color:var(--ink);font-weight:600}

  .mk-charts .filters{margin-top:18px;display:grid;gap:10px}
  .mk-charts .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .mk-charts .rowlabel{font-size:13.5px;color:var(--soft);margin:0 4px 0 0;flex:0 0 auto}
  .mk-charts .chip{font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);background:#fff;
    border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;font-weight:800}
  .mk-charts .chip:hover{border-color:var(--tang);color:var(--tangD)}
  .mk-charts .chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
  .mk-charts .chip .n{color:var(--soft);font-weight:400;margin-left:5px}
  .mk-charts .chip[aria-pressed=true] .n{color:#c9c1b6}

  .mk-charts .group{margin-top:44px}
  .mk-charts .group h2{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:-.01em;
    margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .mk-charts .group h2 .gcount{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--soft)}
  .mk-charts .blurb{font-size:15.5px;color:var(--soft);margin:12px 0 8px;max-width:none}
  .mk-charts .alsosee{font-size:14.5px;color:var(--soft);margin:0 0 20px;max-width:none}

  .mk-charts .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    list-style:none;margin:0;padding:0}
  .mk-charts .tile{margin:0;position:relative}
  .mk-charts .tile .open{display:block;text-decoration:none;color:inherit;
    background:var(--tile);border:1px solid var(--line);border-radius:20px;padding:12px 12px 14px;
    box-shadow:0 6px 18px rgba(29,43,83,.06)}
  .mk-charts .tile .open:hover{border-color:var(--tang)}
  .mk-charts .tile .open:hover h3{color:var(--tangD)}
  .mk-charts .thumb{aspect-ratio:4/3;background:var(--paper);border-radius:14px;
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  .mk-charts .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
  .mk-charts .thumb .fallback{font-size:13px;color:var(--soft);padding:12px;text-align:center}
  .mk-charts .tile h3{font-family:var(--serif);font-size:16.5px;font-weight:700;line-height:1.25;
    margin:11px 0 4px;letter-spacing:-.005em}
  .mk-charts .meta{font-size:13px;color:var(--soft);display:block}
  .mk-charts .haspage{display:block;font-size:12.5px;font-weight:800;color:var(--tangD);margin-top:7px}
  .mk-charts .grades{display:inline-block;font-size:12px;font-weight:600;color:var(--tangD);
    background:var(--tint);border-radius:4px;padding:1px 6px;margin-right:6px}

  .mk-charts .pin{position:absolute;top:18px;right:18px;z-index:2;font-size:12.5px;font-weight:600;
    text-decoration:none;color:#fff;background:rgba(43,37,32,.82);border-radius:6px;padding:5px 9px;opacity:0}
  .mk-charts .tile:hover .pin,.mk-charts .pin:focus{opacity:1}
  .mk-charts .pin:hover{background:var(--tangD)}
  @media (hover:none){.mk-charts .pin{opacity:1}}

  .mk-charts .empty{margin-top:44px;padding:34px 24px;text-align:center;
    border:1.5px dashed var(--line);border-radius:20px;background:#fff}
  .mk-charts .empty p{margin:0 0 14px;color:var(--soft);font-size:16px}

  .mk-charts .prose{margin-top:56px;max-width:none}
  .mk-charts .prose h2{font-family:var(--serif);font-size:26px;margin:0 0 12px;letter-spacing:-.01em}
  .mk-charts .prose h3{font-family:var(--serif);font-size:18.5px;margin:26px 0 6px}
  .mk-charts .prose p{color:var(--soft);font-size:16px;margin:0 0 14px;max-width:90ch}
  .mk-charts .prose p b{color:var(--ink);font-weight:600}
  .mk-charts .howto{margin-top:44px;padding:24px 26px;background:#fff;border:1px solid var(--line);
    border-left:5px solid var(--green);border-radius:20px;max-width:none;box-shadow:0 6px 18px rgba(29,43,83,.06)}
  .mk-charts .howto h2{font-family:var(--serif);font-size:21px;margin:0 0 14px}
  .mk-charts .howto ul{margin:0;padding-left:20px}
  .mk-charts .howto li{margin-bottom:9px;color:var(--soft);font-size:15.5px}
  .mk-charts .howto li b{color:var(--ink);font-weight:600}
  .mk-charts .howto li:last-child{margin-bottom:0}

  .mk-charts .next{margin-top:44px;padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 18px rgba(29,43,83,.06)}
  .mk-charts .next h2{font-family:var(--serif);font-size:21px;margin:0 0 6px}
  .mk-charts .next p{color:var(--soft);font-size:15.5px;margin:0 0 14px;max-width:none}
  .mk-charts .next ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .mk-charts .next li{font-size:15px;color:var(--soft)}
  .mk-charts .next li a{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--line)}
  .mk-charts .next li a:hover{border-color:var(--tang)}
  .mk-charts .updated{margin-top:36px;font-size:13.5px;color:var(--soft)}

  .mk-charts .lb{position:fixed;inset:0;z-index:9999;background:rgba(43,37,32,.9);
    display:flex;flex-direction:column;padding:14px}
  .mk-charts .lb-bar{display:flex;align-items:center;gap:10px;color:#fff;padding:2px 2px 12px;flex:0 0 auto;flex-wrap:wrap}
  .mk-charts .lb-name{font-family:var(--serif);font-size:19px;font-weight:700;margin:0;
    flex:1 1 160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mk-charts .lb-bar .pos{font-size:13.5px;color:#d9d0c4;flex:0 0 auto;margin:0}
  .mk-charts .lb-btn{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
    background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);border-radius:8px;
    padding:8px 13px;flex:0 0 auto;white-space:nowrap}
  .mk-charts .lb-btn:hover{border-color:#fff;background:rgba(255,255,255,.12)}
  .mk-charts .lb-btn.primary{background:var(--tang);border-color:var(--tang)}
  .mk-charts .lb-btn.primary:hover{background:var(--tangD);border-color:var(--tangD)}
  .mk-charts .lb-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;gap:10px}
  .mk-charts .lb-stage img{flex:1 1 auto;min-width:0;max-width:100%;max-height:100%;width:auto;height:auto;
    margin:0 auto;display:block;background:#fff;border-radius:6px;object-fit:contain}
  .mk-charts .nav{flex:0 0 auto;width:44px;height:64px;cursor:pointer;background:rgba(255,255,255,.12);
    border:0;border-radius:8px;color:#fff;font-size:22px;line-height:1}
  .mk-charts .nav:hover{background:rgba(255,255,255,.25)}
  .mk-charts .nav[disabled]{opacity:.25;cursor:default}

  @media (max-width:640px){
    .mk-charts .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
    .mk-charts .lb-name{font-size:16px;flex-basis:100%}
    .mk-charts .lb-bar .pos{display:none}
    .mk-charts .nav{width:36px;height:52px}
  }
  @media (prefers-reduced-motion:no-preference){
    .mk-charts .tile .open,.mk-charts .chip,.mk-charts .pin{transition:border-color .12s,background-color .12s,color .12s,opacity .12s}
  }
  @media print{
    body *{visibility:hidden !important}
    .mk-charts .lb,.mk-charts .lb *{visibility:visible !important}
    .mk-charts .lb{position:static;background:#fff;padding:0;display:block}
    .mk-charts .lb-bar,.mk-charts .nav{display:none !important}
    .mk-charts .lb-stage img{max-width:100%;max-height:none;background:#fff}
    @page{margin:8mm}
  }

  /* site integration */
  .mk-charts{background:transparent;padding:0}
  .mk-charts .wrap{max-width:1160px;padding:0 20px}
  .mk-charts h1{font-family:var(--font);font-weight:700;margin-top:20px}
  .mk-charts .standfirst,.mk-charts .blurb,.mk-charts .prose p,.mk-charts .meta{font-weight:400}