/* Yela Linux - shared styles */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #f7f6f9;
  color: #1d1a26;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: #6d3f87; }
a:hover { color: #4e2b62; }
::selection { background: #ddd8ee; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5cfe4; border-radius: 6px; }
.mono { font-family: 'IBM Plex Mono', monospace; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.page { flex: 1; padding-bottom: 40px; }

/* Masthead */
.masthead { background: #1c1628; color: #efecf7; }
.mast-body { padding-top: 24px; padding-bottom: 22px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: end; }
.wordmark { margin: 0; line-height: 0; }
.wordmark a { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.wordmark .face { height: 52px; width: auto; display: block; }
.wordmark .type { height: 34px; width: auto; display: block; }
.tagline { margin: 9px 0 0; font-size: 14.5px; color: #aa9ec6; max-width: 70ch; line-height: 1.65; }
.tagline b { color: #efecf7; font-weight: 500; }
.sysinfo { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; white-space: nowrap; display: flex; gap: 22px; }
.sysinfo .k { color: #8b7fa9; margin-right: 7px; }
.sysinfo .v { color: #efecf7; }

.rightcol { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.quietnav { display: flex; gap: 20px; font-size: 14px; }
.quietnav a { color: #9c90b8; text-decoration: none; }
.quietnav a:hover { color: #efecf7; }
.quietnav a.on { color: #efecf7; text-decoration: underline; text-decoration-color: #8b57a8; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Page headings */
h1.title { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; margin: 0 0 10px; }
.lead { font-size: 14px; color: #5d5674; margin: 0 0 8px; }
.lead .repo-name { font-family: 'IBM Plex Mono', monospace; }
.lead code { background: #f2effa; border-radius: 5px; padding: 1px 5px; font-size: 12.5px; }
.pkg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 26px; }
.pkg-head .count { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6b5d85; }

/* Breadcrumb */
.crumb { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #6b5d85; margin: 0; padding-top: 24px; }
.crumb a { color: #6d3f87; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { color: #b9b0cf; margin: 0 5px; }
.crumb .cur { color: #6b5d85; }

/* Section head */
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.sec h2 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5d85; margin: 0; }
.sec .c { color: #a99ec2; font-weight: 500; }
.sec a { color: #6d3f87; font-size: 13px; font-weight: 600; text-decoration: none; }

/* Home: intro on the left, "recently uploaded" rail on the right (.cols). The
   top padding sits on the grid, not the prose, so both columns start level. */
.home-cols { padding-top: 46px; }
.home-intro .md-body { font-size: 16px; color: #4b4460; max-width: 68ch; }
.home-intro .md-body > *:first-child { margin-top: 0; }
.home-intro .home-actions { margin-top: 24px; }

/* Home: news headlines under the intro. Whole-row links, so the target is the
   card and not just the title - the summary is rendered with links flattened
   (news_markdown_inline($x, false)) precisely because it sits inside one. */
.news-brief { display: flex; flex-direction: column; gap: 10px; }
.news-brief-item {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-width: 0;
  border: 1px solid #ddd8ee; border-radius: 9px; background: #fff; padding: 13px 16px;
}
.news-brief-item:hover { background: #f2effa; }
.nb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; }
.nb-title { font-size: 15.5px; font-weight: 600; min-width: 0; }
.nb-date { font-size: 12.5px; color: #6b5d85; white-space: nowrap; }
.nb-sum { font-size: 14px; color: #5d5674; }

/* News pages. /news is an index - headline, date and blurb per item, separated
   by a hairline rather than boxed in cards - and /news/<slug> is the item
   itself. Width comes from the .cols grid the rest of the site uses: the side
   rail is what keeps the measure readable, so nothing here needs a max-width of
   its own. The column is emitted even when the rail has nothing in it, so the
   text does not change width from one page to the next. */
.news-list, .news-single { margin-top: 20px; }
.news-item + .news-item { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e6e0f2; }
.news-title { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0; }
.news-single .news-title { font-size: 26px; }
.news-title a { color: #1d1a26; text-decoration: none; }
.news-title a:hover { color: #6d3f87; }
.news-meta { font-size: 12.5px; color: #6b5d85; margin: 5px 0 0; }
.news-sum { font-size: 15px; color: #4b4460; margin: 10px 0 0; }
.news-more { margin: 8px 0 0; }
.news-more a { font-size: 13px; font-weight: 600; text-decoration: none; }

/* Rendered Markdown: a news item's body, and the home page's intro. */
.md-body { font-size: 15px; color: #34304a; }
.md-body > *:first-child { margin-top: 14px; }
.md-body > *:last-child { margin-bottom: 0; }
.md-body p { margin: 0 0 14px; }
.md-body h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 15px; font-weight: 700; margin: 20px 0 6px; }
.md-body ul, .md-body ol { margin: 0 0 14px; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body li > ul, .md-body li > ol { margin: 3px 0; }
.md-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 0 14px; }
.md-body code { background: #f2effa; border-radius: 5px; padding: 1px 5px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.md-body pre { background: #1c1628; border-radius: 9px; overflow-x: auto; margin: 0 0 14px; }
.md-body pre code { display: block; background: none; padding: 16px 18px; color: #efecf7; font-size: 13px; line-height: 1.7; }
.md-body blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 3px solid #ddd8ee; color: #5d5674; }
.md-body blockquote > *:last-child { margin-bottom: 0; }
.md-body hr { border: none; border-top: 1px solid #ece7f6; margin: 22px 0; }

/* Pager: newer on the left, older on the right. On the first page the left
   side is an empty <span> rather than nothing, so "Next page" stays pinned to
   the right instead of sliding over to where "Previous page" had been. */
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Home (home_content.php): hero */
.hero { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 40px; align-items: center; padding: 46px 0 10px; }
.hero-copy h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 14px; max-width: 20ch; }
.hero-lead { font-size: 16px; color: #4b4460; margin: 0; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-block; text-decoration: none; font-size: 14.5px; font-weight: 600;
  background: #fff; border: 1px solid #d5cfe4; border-radius: 8px; padding: 11px 20px; color: #5d5674;
}
.btn:hover { background: #f2effa; color: #5d5674; }
.btn-primary { background: #6d3f87; border-color: #6d3f87; color: #efecf7; }
.btn-primary:hover { background: #5a3271; border-color: #5a3271; color: #efecf7; }
.hero-art { justify-self: end; }
.hero-art img { width: 180px; height: auto; display: block; image-rendering: pixelated; }

/* Home: stat strip */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid #ddd8ee; border-radius: 9px; background: #fff; overflow: hidden; margin-top: 34px;
}
.stat { padding: 16px 18px; border-right: 1px solid #f0edf6; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat:last-child { border-right: none; }
.stat-v { font-size: 21px; font-weight: 600; color: #1d1a26; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5d85; }

/* Home: highlight cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.card { border: 1px solid #ddd8ee; border-radius: 9px; background: #fff; padding: 18px 20px; }
.card h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.card p { margin: 0; font-size: 14px; color: #5d5674; }

/* Home: quick start */
.quickstart { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; align-items: stretch; }
.qs-copy { padding: 18px 20px; }
.qs-copy p { margin: 0 0 12px; font-size: 14px; color: #5d5674; }
.qs-copy p:last-child { margin-bottom: 0; }
.qs-note code { background: #f2effa; border-radius: 5px; padding: 1px 5px; font-size: 12.5px; }
.qs-code { background: #1c1628; border-color: #1c1628; overflow-x: auto; }
.qs-code pre { margin: 0; padding: 18px 20px; font-size: 13px; line-height: 1.85; color: #efecf7; }

/* Syntax highlighting. The class names are the ones tempest/highlight emits
   (its CssTheme, one per token type); the colours are ours rather than one of
   the themes it ships, because every code block on the site sits on the same
   near-black panel and had a palette already. Comments recede into the
   background's own violet, the things that carry the meaning of a line -
   strings, keywords, names - come forward, and operators stay barely tinted so
   they never out-shout what they join. Diff blocks are the exception, where the
   red and the green are the content. Each colour clears 4.5:1 on #1c1628. */
.hl-comment { color: #8b7fa9; }            /* comment */
.hl-value { color: #9fd6a4; }              /* string, and any literal value */
.hl-number { color: #e9a7cd; }             /* number */
.hl-literal { color: #e9a7cd; }
.hl-keyword { color: #c3a0f0; }            /* keyword */
.hl-type { color: #7fcfe8; }               /* type, builtin, diff hunk header */
.hl-property { color: #f0c584; }           /* function name, key, list marker */
.hl-variable { color: #f5a99a; }           /* $variable */
.hl-attribute { color: #a8c6f5; }          /* attribute */
.hl-generic { color: #a8c6f5; }            /* flag, generic */
.hl-operator { color: #b6a8d2; }           /* operator */
.hl-injection { color: #efecf7; }          /* one language nested in another */
.hl-addition { color: #86d992; }           /* diff: added line */
.hl-deletion { color: #ef9090; }           /* diff: removed line */
.hl-gutter { color: #6b5d85; }             /* line numbers, if ever turned on */
.hl-em { font-style: italic; }
.hl-strong { font-weight: 600; }
.hl-blur { filter: blur(2px); }

/* Home: repositories */
.repo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.repo-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none;
  border: 1px solid #ddd8ee; border-radius: 9px; background: #fff; padding: 14px 16px;
}
.repo-card:hover { background: #f2effa; }
.repo-count { font-size: 13px; color: #6b5d85; }

/* Home: recently uploaded grid */
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.recent-item {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; min-width: 0;
  border: 1px solid #ddd8ee; border-radius: 9px; background: #fff; padding: 13px 15px;
}
.recent-item:hover { background: #f2effa; }
.ri-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ri-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-ver { font-size: 12.5px; color: #6b5d85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toolbar */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 20px 0 16px; }
input.search {
  flex: 1; min-width: 220px; font-family: 'Open Sans', system-ui, sans-serif; font-size: 15px; color: #1d1a26;
  background: #fff; border: 1px solid #d5cfe4; border-radius: 7px; padding: 10px 13px; outline: none;
}
input.search:focus { border-color: #8b56a9; box-shadow: 0 0 0 3px rgba(139,86,169,0.15); }
input.search::placeholder { color: #6b5d85; }
.seg { display: flex; gap: 5px; }
.seg a, .segbtn {
  display: inline-block; text-decoration: none; font-family: 'Open Sans', system-ui, sans-serif; font-size: 13.5px;
  background: #fff; border: 1px solid #d5cfe4; border-radius: 7px; padding: 9px 14px; cursor: pointer; color: #5d5674;
}
.seg a:hover, .segbtn:hover { background: #f2effa; color: #5d5674; }
.seg a.on { background: #6d3f87; border-color: #6d3f87; color: #efecf7; }
.tally { margin-left: auto; font-size: 13px; color: #6b5d85; }

/* Tables */
table { border-collapse: collapse; width: 100%; }
.panel { border: 1px solid #ddd8ee; border-radius: 9px; overflow: hidden; background: #fff; }
.pkg-table { table-layout: fixed; }
.pkg-table thead th {
  background: #1c1628; color: #bfb2d8; padding: 10px 14px; text-align: left;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.pkg-table .c-repo { width: 92px; }
.pkg-table .c-group { width: 20%; }
.pkg-table .c-ver { width: 130px; }
.pkg-table .c-up { width: 116px; }
.pkg-table th.c-up { text-align: right; }
/* Group index: the description carries the row, the count is a figure. */
.pkg-table .c-desc { width: 40%; }
.pkg-table .c-num { width: 104px; }
.pkg-table th.c-num { text-align: right; }
.pkg-table .c-upver { width: 150px; }
.pkg-table .c-checked { width: 320px; }
.pkg-table th.c-checked { text-align: right; }
.pkg-table tbody tr { border-bottom: 1px solid #f0edf6; }
.pkg-table tbody tr:last-child { border-bottom: none; }
.pkg-table tbody tr:nth-child(even) { background: #faf9fc; }
.pkg-table tbody tr:hover { background: #f2effa; }
.pkg-table tbody tr.outdated, .pkg-table tbody tr.outdated:nth-child(even) { background: #dff3e2; }
.pkg-table tbody tr.outdated:hover { background: #cfebd5; }
.pkg-table tbody tr.outdated td.upver { color: #1d5c31; font-weight: 600; }
.pkg-table td { padding: 10px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-table td.name { font-size: 15px; font-weight: 500; }
.pkg-table td.name a { color: #1d1a26; text-decoration: none; }
.pkg-table td.name a:hover { color: #6d3f87; }
.pkg-table td.group { font-size: 13.5px; color: #6d6684; }
.pkg-table td.group a { color: #6d3f87; text-decoration: none; }
.pkg-table td.group a:hover { text-decoration: underline; }
.pkg-table td.desc { font-size: 13.5px; color: #6d6684; }
.pkg-table td.num { text-align: right; font-size: 14px; color: #6d6684; }
.pkg-table td.ver { font-size: 14px; color: #6d6684; }
.pkg-table td.upver { font-size: 14px; color: #6d6684; }
.pkg-table td.upver .unknown { color: #b9b0cf; }
.pkg-table td.up { text-align: right; }
.pkg-table td.up a { color: #6d3f87; text-decoration: none; font-size: 13px; font-weight: 600; }
.pkg-table td.num a { color: #6d3f87; text-decoration: none; }
.pkg-table td.num a:hover { text-decoration: underline; }
.pkg-table td.checked { text-align: right; font-size: 13px; color: #6d6684; }
.pkg-table td.checked .age { display: inline-block; width: 74px; color: #b9b0cf; text-align: right; }
.pkg-table td.checked .never { color: #a4553f; font-weight: 500; }
.pkg-table .empty-row td, .pkg-table .empty-row:hover td { padding: 0; background: #fff; }

.badge {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px; background: #eeeaf5; color: #5d5674;
}
.badge.main { background: #f1e9f6; color: #6d3f87; }
.badge.kde { background: #dff1f0; color: #1a6b67; }
.badge.desktop { background: #dff1f0; color: #1a6b67; }
.badge.gnome { background: #e6edf7; color: #2b5382; }

.empty { padding: 56px; text-align: center; color: #6b5d85; font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; white-space: normal; }

/* Listing layout: table on the left, "recently uploaded" rail on the right */
.cols { display: grid; grid-template-columns: minmax(0,1fr) 262px; gap: 22px; align-items: start; }
.listing-main { min-width: 0; }

.recent-side { min-width: 0; }
.recent { border: 1px solid #ddd8ee; border-radius: 9px; background: #fff; overflow: hidden; }
.recent thead th {
  background: #1c1628; color: #bfb2d8; padding: 10px 14px; text-align: left;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.recent tbody.entry { border-bottom: 1px solid #f0edf6; }
.recent tbody.entry:last-child { border-bottom: none; }
.recent tbody.entry:hover tr { background: #f2effa; }
.recent td { padding: 9px 14px; vertical-align: top; }
.recent td.nm { font-size: 14px; font-weight: 600; word-break: break-word; }
.recent td.nm .vp { font-weight: 400; color: #6d6684; }
.recent td.nm a { text-decoration: none; color: inherit; }
.recent td.nm a:hover { color: #6d3f87; }
.recent td.rp { text-align: right; width: 1%; white-space: nowrap; }
/* Date column, in place of the repo badge on the news rail. */
.recent td.dt { text-align: right; width: 1%; white-space: nowrap; font-size: 12.5px; color: #6b5d85; }
/* A second table stacked under the first in the same rail. */
.recent.stacked { margin-top: 14px; }

/* Package detail */
.pkg-detail-head { padding-top: 22px; margin-bottom: 4px; }
.pkg-detail-head .title { font-size: 24px; margin: 0 0 6px; }
.pkg-detail-head .title .badge { vertical-align: middle; font-size: 12px; margin-left: 8px; }
.pkg-detail-head .ver-line { font-size: 14px; color: #6d6684; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,340px); gap: 28px; align-items: start; }
.detail-main { min-width: 0; }
.detail-side { min-width: 0; }
.detail-side .dep-block + .dep-block { margin-top: 4px; }
/* Pull the side column up so its first section head starts level with the top
   of the main column's detail grid, instead of a section-gap below it. */
.detail-side .dep-block:first-child .sec { margin-top: 0; }
.detail-grid { border: 1px solid #ddd8ee; border-radius: 9px; overflow: hidden; background: #fff; margin-bottom: 8px; }
.kv { display: flex; align-items: baseline; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #f0edf6; }
.kv:last-child { border-bottom: none; }
.kv:nth-child(even) { background: #faf9fc; }
.kv-k { flex: 0 0 130px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5d85; }
.kv-v { flex: 1; min-width: 0; font-size: 14px; color: #1d1a26; overflow: hidden; text-overflow: ellipsis; }
.kv-v a { color: #6d3f87; text-decoration: none; }
.kv-v a:hover { text-decoration: underline; }
.kv-v .muted { color: #b9b0cf; }

/* Dependency / file panels */
.dep-block { min-width: 0; }
.deplist { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.deplist.scrolly { max-height: 260px; overflow-y: auto; }
.dep { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; padding: 3px 8px; border-radius: 6px; background: #f2effa; }
.dep a { color: #6d3f87; text-decoration: none; }
.dep a:hover { text-decoration: underline; }
.dep .dep-unresolved { color: #8b82a3; }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.filelist { padding: 8px 0; }
.fileline { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #4b4460; padding: 4px 14px; border-bottom: 1px solid #f5f2fa; }
.fileline:last-child { border-bottom: none; }

/* Footer */
footer { margin-top: 34px; background: #131020; color: #8b7fa9; }
footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 26px; font-size: 12px; }
footer a { color: #9c90b8; text-decoration: none; }
footer a:hover { color: #efecf7; }
/* Sized to match the pre-scaled asset 1:1 (see footer.php), so no "pixelated"
   here - at a fractional device pixel ratio smooth beats nearest-neighbour. */
.mascot { height: 88px; width: 41px; display: block; }

@media (max-width: 900px) {
  .wrap { padding: 0 22px; }
  .mast-body { grid-template-columns: minmax(0,1fr); gap: 20px; align-items: start; }
  .rightcol { align-items: flex-start; gap: 14px; }
  .sysinfo { flex-wrap: wrap; gap: 8px 20px; white-space: normal; }
  .cols { grid-template-columns: minmax(0,1fr); }
  .detail-layout { grid-template-columns: minmax(0,1fr); }
  /* Stacked: the side column follows the main one, so it needs the gap back. */
  .detail-side .dep-block:first-child .sec { margin-top: 26px; }
  .cards { grid-template-columns: minmax(0,1fr); }
  .quickstart { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid #f0edf6; }
  .pkg-table .c-group { display: none; }
  .pkg-table td.group { display: none; }
  /* The group index keeps its description as the name cell's tooltip. */
  .pkg-table .c-desc { display: none; }
  .pkg-table td.desc { display: none; }
}

@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0,1fr); gap: 24px; padding-top: 32px; }
  .hero-copy h1 { font-size: 27px; }
  .hero-art { justify-self: start; }
  .hero-art img { width: 130px; }
  .wordmark .face { height: 44px; }
  .wordmark .type { height: 28px; }
  .toolbar { gap: 8px; }
  input.search { min-width: 100%; }
  .tally { margin-left: 0; }
  .pkg-table th, .pkg-table td { padding: 10px 10px; }
  .pkg-table .c-repo { width: 84px; }
  .pkg-table .c-ver { width: 106px; }
  .pkg-table .c-upver { width: 106px; }
  .pkg-table .c-up, .pkg-table td.up { display: none; }
  .pkg-table td.name { font-size: 14px; }
  .pkg-table .c-num, .pkg-table td.num { display: none; }
  .pkg-table .c-checked { width: 96px; }
  .pkg-table td.checked .stamp { display: none; }
  .pkg-table td.checked .age { width: auto; color: #6d6684; }
  .kv { flex-direction: column; gap: 2px; }
  .kv-k { flex: none; }
  .news-item + .news-item { margin-top: 22px; padding-top: 22px; }
  .news-title { font-size: 18px; }
  .news-single .news-title { font-size: 22px; }
  .md-body { font-size: 14.5px; }
}

/* Skater easter egg */
@keyframes skate {
  from { left: -150px; }
  to   { left: calc(100% + 100px); }
}
#skater {
  position: fixed;
  bottom: 0;
  left: -150px;
  z-index: 9999;
  animation: skate 8s linear forwards;
  pointer-events: none;
}
#skater img { display: block; }