/* a single project page (/projects/<id>): icon or logo + title + download, poster, body (README from GitHub or a ported page) */
#topheader.project{height:auto; min-height:54px; padding-bottom:2px; background:#fff url("../images/site/code_bg.png?v=2a7e3e51") repeat-x left bottom / 574px 54px}
/* the project tabs on their own white strip, the stripes show only under it */
body.project .subnav, body.safe .subnav{display:inline-flex; width:auto; border-radius:0 6px 6px 0; background:#fff; padding-right:14px}
body.themed .subnav{background:var(--bg)}
body.themed .subnav-item, body.themed .subnav-item:visited{color:#7fcfff; border-bottom-color:rgba(127,207,255,.4)}
body.themed .subnav-item:hover{color:#b6e4ff}
body.themed .subnav-item.active{border-color:#5C6A6B; background:transparent}
body.themed .subnav-item.active a{color:var(--ink)}
.project-head{display:flex; align-items:center; gap:30px; margin-top:24px}
.project-head.stacked{flex-direction:column; gap:14px}
.app-icon{max-width:256px; max-height:256px; width:auto; height:auto; flex:none}
.app-logo{width:min(526px, 100%); height:auto}
.project-title{text-align:center; flex:1; min-width:0}
.project-title h1{font-size:clamp(40px, 8vw, 56pt); line-height:1.1; font-weight:bold; color:#0060c0}
.project-title h2{font-size:clamp(22px, 4.5vw, 40pt); font-weight:normal; line-height:1.15; text-wrap:balance}
.dl-note{color:#444; font-size:15px; margin-top:6px}
.snippet{display:inline-block; text-align:left; margin:10px auto 0; padding:10px 14px; background:#f8f8f8; border:1px solid #ddd; border-radius:4px; font-size:15px; overflow-x:auto; max-width:100%}
.snippet code{border:0; padding:0; margin:0; background:none; white-space:pre}
.poster{margin:32px auto 0; max-width:800px}
.poster img{display:block; width:100%; height:auto}

/* body text */
.readme{margin:32px auto 0; max-width:800px}
.readme h2{font-size:28px; font-weight:bold; margin-top:36px; line-height:1.2}
.readme h3{font-size:21px; font-weight:bold; margin-top:24px}
.readme h4{font-size:18px; font-weight:bold; margin-top:20px}
.readme hr{border:0; border-top:1px solid #ddd; margin:28px 0 0}
.readme ul, .readme ol{margin:8px 0 0; padding-left:1.4em}
.readme li{margin-top:3px}
.readme blockquote{margin:10pt 0 0; padding:8px 14px; border-left:3px solid #ff8f00; background:#f8f8f8}
.readme blockquote p{margin:0}
.readme img{display:block; margin:14px auto 0; border:1px solid #ddd; border-radius:4px; max-width:100%; height:auto}
.readme img.inline{display:inline; margin:0 2px; border:0; vertical-align:middle}
.readme pre{margin:10pt 0 0; padding:10px 14px; background:#f8f8f8; border:1px solid #ddd; border-radius:4px; overflow-x:auto; font-size:15px}
.readme pre code{border:0; padding:0; margin:0; background:none; white-space:pre}
.readme p code, .readme li code, .readme h4 code, .readme figcaption code{white-space:normal; overflow-wrap:anywhere}
.readme kbd{font-family:"PT Mono", Consolas, monospace; font-size:.92em; padding:0 5px; border:1px solid #bbb; border-bottom-width:2px; border-radius:3px; background:#fff}
.tablewrap{overflow-x:auto; margin-top:10pt}
.readme table{border-collapse:collapse; width:100%; min-width:360px}
.readme th, .readme td{text-align:left; padding:6px 10px; border-bottom:1px solid #ddd; vertical-align:top}
.readme th{border-bottom:2px solid #bbb}
/* figures: screenshots and the still/animated diagram pairs of the old pages */
.readme figure{margin:22px 0 0; text-align:center}
.readme figure img{margin:0 auto}
.readme figcaption{margin-top:6px; font-size:15px; color:#444}
.readme figure.gif button{font:inherit; font-size:13px; line-height:1; padding:3px 8px 4px; margin-right:6px; border:1px solid #ADCBCE; border-radius:2px; background:#fff; color:#0060c0; cursor:pointer; vertical-align:middle}
.readme figure.gif button:hover{color:#ff8f00; border-color:#ff8f00}

/* themed pages take the paper and ink colours of their app icon */
body.themed{background:var(--bg); color:var(--ink)}
body.themed #topheader.project{background:transparent url("../images/site/code_bg-alpha.png?v=33a5b5b9") repeat-x left bottom / 574px 54px}
body.themed .project-title h1{color:var(--ink)}
body.themed .dl-note, body.themed .readme figcaption{color:inherit; opacity:.7}
body.themed .snippet, body.themed .readme pre, body.themed .readme blockquote{background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.14)}
body.themed .readme h2, body.themed .readme h3, body.themed .readme h4, body.themed .readme strong{color:#fff}
body.themed .readme hr{border-top-color:rgba(255,255,255,.14)}
body.themed .readme img, body.themed .poster img{border:0; border-radius:0}
body.themed .readme th{border-bottom-color:rgba(255,255,255,.35)}
body.themed .readme td{border-bottom-color:rgba(255,255,255,.14)}
body.themed .readme kbd{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3)}
body.p-frename{--bg:#282923; --ink:#e3e3dc}
body.p-imdb{--bg:#101211; --ink:#e6e6e6}
body.p-ytdlp{--bg:#0f0f0f; --ink:#f1f1f1}
body.p-vpn{--bg:#090909; --ink:#ececec}
body.p-sharpipp{--bg:#4a004c; --ink:#f3e8f4}

@media (max-width:760px){
  .project-head{flex-direction:column; gap:10px}
  .app-icon{max-width:128px; max-height:128px}
}