@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/Geist-Variable.woff2") format("woff2")}
  @font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/GeistMono-Variable.woff2") format("woff2")}
  :root{
    color-scheme:dark;
    --bg:#0a0a0b; --bg-hover:#141417;
    --line:#26262a; --line-hi:#45454c;
    --fg:#ececef; --fg-dim:#9c9ca4; --fg-mute:#6b6b73;
    --accent:#55aaff; --accent-ink:#001321;
    --notice-accent:#e0a33a; --notice-line:#4a3a1c; --notice-bg:#1a150b;
    --mono:"Geist Mono",ui-monospace,monospace;
    --maxw:760px;
  }
  :root[data-theme="light"]{
    color-scheme:light;
    --bg:#fbfbfa; --bg-hover:#f1f1ee;
    --line:#e4e4e0; --line-hi:#c6c6bf;
    --fg:#151514; --fg-dim:#5d5d58; --fg-mute:#8b8b85;
    --accent:#0a6fce; --accent-ink:#fff;
    --notice-accent:#8a5a00; --notice-line:#e6d5ac; --notice-bg:#fdf6e6;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:15.5px;line-height:1.6;background:var(--bg);color:var(--fg);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:52px 24px 96px}
  a{color:var(--accent);text-decoration:none}
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .micro{font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}

  /* landing masthead */
  .mast-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;
    border-bottom:1px solid var(--line)}
  .mast-top .micro{margin-right:auto}
  a.micro{color:var(--fg-mute);transition:color .15s}
  a.micro:hover{color:var(--fg)}
  .mast h1{font-size:clamp(40px,9vw,68px);font-weight:640;letter-spacing:-.045em;
    line-height:1.04;margin:30px 0 0}

  /* depiction masthead */
  .masthead{display:flex;align-items:center;gap:16px;margin-bottom:6px}
  .masthead img{width:56px;height:56px;flex:0 0 auto}
  .masthead h1{font-size:26px;font-weight:640;letter-spacing:-.03em;margin:0}
  .masthead .sub{color:var(--fg-dim);margin:4px 0 0;font-size:14.5px}
  .masthead .theme-picker{margin-left:auto}

  .theme-picker{flex:0 0 auto;display:inline-flex;border:1px solid var(--line)}
  .theme-picker button{display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;cursor:pointer;border:0;border-left:1px solid var(--line);
    border-radius:0;background:transparent;color:var(--fg-mute);padding:0;
    transition:color .15s,background .15s}
  .theme-picker button:first-child{border-left:0}
  .theme-picker button:hover{color:var(--fg)}
  .theme-picker button[aria-pressed="true"]{color:var(--fg);background:var(--bg-hover)}
  .theme-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .theme-picker svg{width:15px;height:15px;display:block}

  /* install strip */
  .install{margin:26px 0 0}
  .field{display:flex}
  .field input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);
    border-right:0;border-radius:0;background:transparent;color:var(--fg);
    font-family:var(--mono);font-size:13px}
  .field input:focus-visible{outline:none;border-color:var(--line-hi)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:11px 16px;border:1px solid var(--line);border-radius:0;background:transparent;
    color:var(--fg-dim);cursor:pointer;white-space:nowrap;
    font-family:var(--mono);font-size:11.5px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;
    transition:color .15s,border-color .15s,background .15s,opacity .15s}
  .btn:hover{color:var(--fg);border-color:var(--line-hi)}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;z-index:1}
  .btn.copy{border:1px solid var(--fg);background:var(--fg);color:var(--bg);min-width:92px}
  .btn.copy:hover{opacity:.85}
  .btn.copy.ok{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);opacity:1}
  .managers{display:flex;margin-top:-1px}
  .managers .btn{flex:1;position:relative;margin-left:-1px}
  .managers .btn:first-child{margin-left:0}
  .managers .btn:hover{z-index:1}
  .btn.primary{color:var(--accent)}
  .btn.primary:hover{border-color:var(--accent);color:var(--accent)}

  /* search */
  .search{position:relative;margin-top:-1px}
  .search input{width:100%;padding:12px 96px 12px 14px;border:1px solid var(--line);
    border-radius:0;background:transparent;color:var(--fg);
    font-family:var(--mono);font-size:13px;-webkit-appearance:none;appearance:none}
  .search input::placeholder{color:var(--fg-mute)}
  .search input::-webkit-search-cancel-button{display:none}
  .search input:focus-visible{outline:none;border-color:var(--line-hi)}
  .search .micro{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
  body.searching .tabs,body.searching .lede,body.searching .fl-head,
  body.searching .flavors{display:none}
  body.searching .reveal{animation:none;opacity:1;transform:none}
  .no-results{display:none;color:var(--fg-dim);font-size:14px;margin-top:30px}
  body.searching .no-results.show{display:block}

  /* top-level tabs: xiOS / Tweaks */
  .tabs{display:flex;gap:30px;margin-top:48px;border-bottom:1px solid var(--line)}
  .tab{appearance:none;background:none;border:0;padding:0 2px 14px;cursor:pointer;
    font-family:inherit;font-size:clamp(27px,5.5vw,40px);font-weight:620;
    letter-spacing:-.035em;line-height:1;color:var(--fg-mute);position:relative;
    transition:color .15s}
  .tab:hover{color:var(--fg-dim)}
  .tab[aria-selected="true"]{color:var(--fg)}
  .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;
    bottom:-1px;height:2px;background:var(--accent)}
  .tab:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
  .tab .tab-n{font-family:var(--mono);font-size:11.5px;font-weight:500;
    letter-spacing:0;color:var(--fg-mute);vertical-align:top;
    margin-left:7px;position:relative;top:2px}

  .lede{color:var(--fg-dim);font-size:15px;max-width:58ch;margin:24px 0 0}
  .lede strong{color:var(--fg);font-weight:560}

  /* flavor chooser */
  .fl-head{display:flex;align-items:baseline;gap:10px;margin:36px 0 0;
    padding-bottom:10px;border-bottom:1px solid var(--line)}
  .fl-head h2{margin:0}
  .flavors{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--line)}
  .flavor{display:block;padding:18px 18px 20px;color:inherit;min-width:0;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transition:background .15s}
  .flavor:hover{background:var(--bg-hover)}
  .flavor:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .f-num{display:block;font-family:var(--mono);font-size:11px;
    letter-spacing:.14em;color:var(--accent)}
  .f-name{display:block;font-size:22px;font-weight:620;letter-spacing:-.02em;margin-top:12px}
  .f-name .arr{display:inline-block;margin-left:7px;color:var(--accent);opacity:0;
    transform:translateX(-3px);transition:opacity .15s,transform .15s}
  .flavor:hover .f-name .arr{opacity:1;transform:none}
  .f-tag{display:block;color:var(--fg-dim);font-size:13.5px;line-height:1.5;margin-top:5px}
  .f-pkg{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--fg-mute)}

  /* categories + package rows */
  .cat{margin-top:36px}
  summary.cat-head{list-style:none;display:flex;align-items:baseline;gap:10px;cursor:pointer;
    padding-bottom:10px;border-bottom:1px solid var(--line);
    -webkit-tap-highlight-color:transparent}
  summary.cat-head::-webkit-details-marker{display:none}
  summary.cat-head:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .cat-name{font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
  summary.cat-head:hover .cat-name{color:var(--fg)}
  .cat-head .count,.fl-head .count{font-family:var(--mono);font-size:11px;color:var(--fg-mute)}
  .cat-head .ind{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--fg-mute)}
  .cat-head .ind::before{content:"+"}
  details.cat[open] .ind::before{content:"\2212"}

  .list{display:block}
  .list.solo{margin-top:26px;border-top:1px solid var(--line)}
  .row{display:flex;align-items:baseline;gap:14px;padding:11px 2px;min-width:0;
    border-bottom:1px solid var(--line);color:inherit;transition:background .15s}
  .row:hover{background:var(--bg-hover)}
  .row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .row .n{font-weight:560;font-size:15px;letter-spacing:-.01em;white-space:nowrap;
    transition:color .15s}
  .row:hover .n{color:var(--accent)}
  .row .t{flex:1;min-width:0;color:var(--fg-dim);font-size:13.5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row .v{font-family:var(--mono);font-size:11.5px;color:var(--fg-mute);white-space:nowrap}

  /* depiction pages */
  .back{display:inline-flex;align-items:center;gap:7px;color:var(--fg-dim);
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;margin-bottom:28px;transition:color .15s}
  .back:hover{color:var(--fg)}
  .back svg{width:14px;height:14px;display:block}
  /* securityNotice: sits above the prose, must read as a caveat rather than a badge.
     Amber rather than red -- these packages work as documented, the notice is about
     what they expose, and a red alarm on every visit trains people to skip it. */
  .notice{margin:0 0 22px;padding:13px 15px;border:1px solid var(--notice-line);
    border-left:3px solid var(--notice-accent);border-radius:7px;background:var(--notice-bg)}
  .notice strong{display:block;color:var(--notice-accent);font-family:var(--mono);
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:7px}
  .notice p{margin:.4em 0;color:var(--fg-dim);font-size:14px;line-height:1.55}
  .notice p:first-of-type{margin-top:0} .notice p:last-child{margin-bottom:0}
  .notice a{color:var(--fg);border-bottom:1px solid var(--notice-accent)}
  .notice code{font-family:var(--mono);font-size:.9em;color:var(--fg)}
  .prose p{margin:.6em 0;color:var(--fg-dim)}
  .prose strong{color:var(--fg);font-weight:600} .prose em{color:var(--fg)}
  .prose ul{margin:.5em 0;padding-left:1.15em} .prose li{margin:.25em 0;color:var(--fg-dim)}
  .prose a{border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
  .project-link{margin-top:20px}
  .project-link a{display:inline-flex;padding:9px 12px;border:1px solid var(--line-hi);
    border-radius:7px}
  .prose code{font-family:var(--mono);font-size:.9em;color:var(--fg);
    background:var(--bg-hover);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
  .shots{display:flex;gap:14px;overflow-x:auto;margin-top:8px;padding:4px 2px 10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .shot{flex:0 0 min(260px,72vw);margin:0;border:1px solid var(--line);
    border-radius:8px;overflow:hidden;background:var(--bg-hover);scroll-snap-align:start}
  .shot img{display:block;width:100%;height:auto}
  .shot figcaption{padding:9px 10px;border-top:1px solid var(--line);
    color:var(--fg-dim);font-size:12.5px;line-height:1.35}
  h2.section{font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin:36px 0 4px}
  table.info{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
  table.info td{padding:11px 2px;border-bottom:1px solid var(--line)}
  table.info tr:last-child td{border-bottom:0}
  table.info td:first-child{color:var(--fg-mute);width:38%}
  table.info td:last-child{font-family:var(--mono);font-size:12.5px;word-break:break-word}

  footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;gap:12px;
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
  footer a{color:var(--fg-dim)} footer a:hover{color:var(--fg)}

  @media (max-width:560px){
    .wrap{padding:36px 18px 72px}
    .flavors{grid-template-columns:1fr}
    .managers{flex-wrap:wrap}
    .managers .btn{flex:1 1 100%;margin-left:0;margin-top:-1px}
    .row{flex-wrap:wrap;row-gap:0}
    .row .v{margin-left:auto}
    .row .t{flex:1 1 100%;order:3}
  }
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(9px);
      animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards;
      animation-delay:calc(var(--i,0)*38ms)}
    @keyframes rise{to{opacity:1;transform:none}}
  }