.stats-page,.album-page,.friends-page,.media-page{padding-bottom:90px}
.stats-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}
.stat-card,.stats-panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 4px 18px rgba(30,40,60,.025)}
.stat-card{display:flex;flex-direction:column;gap:7px;padding:17px}
.stat-card>span,.stat-card>small{color:var(--muted);font-size:10px}
.stat-card strong{font-size:27px;letter-spacing:-.04em}
.stats-panels{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.stats-panel{padding:20px}
.stats-panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.stats-panel-heading .eyebrow{margin-bottom:3px;font-size:9px}
.stats-panel-heading h2,.friends-category h2,.friend-request h2{margin:0;font-size:17px}
.stats-panel-heading>span{color:var(--muted);font-size:10px}
.writing-timeline{display:grid;max-height:460px;overflow:auto}
.timeline-post{display:grid;grid-template-columns:75px minmax(0,1fr) 50px;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:10px}
.timeline-post time,.timeline-post>b{color:var(--muted);font:9px "DM Mono",monospace}
.timeline-post>b{text-align:right}
.timeline-post>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline-post:hover>span{color:var(--accent)}
.category-stats,.year-stats{display:grid;gap:15px}
.category-stat,.year-stat{display:grid;grid-template-columns:60px 1fr 28px;align-items:center;gap:10px;color:var(--muted);font-size:10px}
.category-stat>b,.year-stat>b{text-align:right;color:var(--text);font:10px "DM Mono",monospace}
.stat-track{height:7px;overflow:hidden;border-radius:8px;background:var(--soft)}
.stat-track i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#b5a8fa));transition:width .65s cubic-bezier(.2,.8,.2,1)}
.year-heading{margin-top:29px}
.stats-tags{margin-top:17px}
.stats-tags .tag-cloud{gap:9px}
.stats-tags .tag-cloud a{padding:6px 9px}
.stats-tags .tag-cloud small{opacity:.65}
.stats-note{margin:17px 0 0;color:var(--muted);font-size:10px}
.album-grid{columns:4;column-gap:8px}
.album-photo{position:relative;width:100%;display:block;break-inside:avoid;margin:0 0 8px;padding:0;overflow:hidden;border:0;border-radius:8px;background:var(--soft);cursor:zoom-in;transition:filter .25s,transform .25s}
.album-photo img{width:100%;height:auto;display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.album-photo-caption{position:absolute;inset:auto 0 0;padding:30px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.68));color:white;text-align:left;font-size:12px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.album-photo:hover img{transform:scale(1.04)}
.album-photo:hover .album-photo-caption{opacity:1;transform:translateY(0)}
.album-grid.is-hovering .album-photo:not(.is-hovered){filter:blur(2px) brightness(.8);transform:scale(.985)}
.lightbox-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;display:none;place-items:center;margin:0;padding:45px;border:0;background:rgba(4,7,13,.92);color:#fff}
.lightbox-dialog[open]{display:grid}
.lightbox-dialog::backdrop{background:rgba(4,7,13,.92)}
.lightbox-dialog figure{max-width:min(1100px,88vw);max-height:88dvh;margin:0;text-align:center}
.lightbox-dialog figure img{max-width:100%;max-height:calc(86dvh - 36px);object-fit:contain;border-radius:5px}
.lightbox-dialog figcaption{padding-top:8px;color:#e2e8f0;font-size:12px}
.lightbox-close,.lightbox-nav{position:fixed;z-index:1;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:28px;cursor:pointer;transition:background .2s,transform .2s}
.lightbox-close:hover,.lightbox-nav:hover{transform:scale(1.06);background:rgba(255,255,255,.2)}
.lightbox-close{top:20px;right:22px}
.lightbox-nav{top:50%;transform:translateY(-50%);font-size:35px}
.lightbox-nav:hover{transform:translateY(-50%) scale(1.06)}
.lightbox-prev{left:20px}.lightbox-next{right:20px}
.essay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;padding-bottom:90px}
.essay-card{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--soft);transition:transform .22s,box-shadow .22s}
.essay-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.essay-card>header{display:flex;align-items:center;gap:11px;padding:14px 15px 8px}
.essay-card>header img{width:43px;height:43px;border:2px solid var(--surface);border-radius:50%;object-fit:cover;background:var(--surface)}
.essay-card>header h2{margin:0;font-size:12px}.essay-card>header time{color:var(--muted);font-size:9px}
.essay-copy{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5;margin:5px 0 11px;padding:0 17px;color:var(--muted);font-size:11px;line-height:1.8}
.essay-images{display:flex;flex-wrap:wrap;gap:6px;padding:0 15px 15px}
.essay-images button{width:calc(33.33% - 5px);aspect-ratio:1;overflow:hidden;padding:0;border:0;border-radius:7px;background:var(--line);cursor:zoom-in}
.essay-images img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.essay-images button:hover img{transform:scale(1.06)}
.media-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.media-filters button{display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--muted);font-size:10px;cursor:pointer;transition:all .2s}
.media-filters button span{font:9px "DM Mono",monospace;opacity:.7}
.media-filters button:hover,.media-filters button.is-active{border-color:var(--accent);background:var(--accent);color:white}
.media-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.media-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.media-card[hidden]{display:none}
.media-poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--soft)}
.media-poster>img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.media-card:hover .media-poster>img{transform:scale(1.04)}
.media-details{position:absolute;inset:auto 0 0;max-height:88%;overflow:auto;padding:35px 11px 12px;background:linear-gradient(transparent,rgba(8,12,20,.96) 20%);color:white;transform:translateY(calc(100% - 38px));transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.media-card:hover .media-details,.media-card:focus-within .media-details{transform:translateY(0)}
.media-category{margin:0 0 4px;color:#c4b5fd;font-size:9px}
.media-details h2{margin:0 0 5px;font-size:12px;line-height:1.45}
.media-description{margin:0 0 8px;color:#cbd5e1;font-size:9px;line-height:1.65}
.media-rating{display:flex;gap:8px;margin:6px 0;color:#cbd5e1;font-size:9px}
.media-rating span:first-child:not(:last-child){color:#fbbf24}
.media-details>a{display:block;margin-top:4px;color:#c4b5fd;font-size:9px}
.media-empty{padding:35px;color:var(--muted);text-align:center;font-size:12px}
.friends-page{padding-bottom:90px}
.friends-avatars{display:flex;padding:5px 0 32px}
.friends-avatars a{width:38px;height:38px;margin-left:-7px;overflow:hidden;border:2px solid var(--surface);border-radius:50%;background:var(--soft);transition:transform .2s}
.friends-avatars a:first-child{margin-left:0}
.friends-avatars a:hover{z-index:2;transform:translateY(-4px)}
.friends-avatars img{width:100%;height:100%;object-fit:cover}
.friends-category{margin-bottom:38px}
.friends-category h2{margin-bottom:14px}
.friends-category h2 span{color:var(--muted);font-size:12px;font-weight:500}
.friends-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.friend-card{display:block;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:transform .2s,border-color .2s,box-shadow .2s}
.friend-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow)}
.friend-preview{width:100%;height:115px;display:block;object-fit:cover;background:var(--soft)}
.friend-info{display:flex;min-height:82px;align-items:center;gap:12px;padding:14px}
.friend-info>img,.friend-avatar-fallback{width:46px;height:46px;flex:none;border:2px solid var(--soft);border-radius:50%;object-fit:cover;background:var(--soft)}
.friend-avatar-fallback{display:grid;place-items:center;color:var(--accent);font-size:18px;font-weight:700}
.friend-copy{min-width:0;flex:1}
.friend-info b,.friend-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-info b{color:var(--text);font-size:13px;font-weight:700}
.friend-info small{margin-top:4px;color:var(--muted);font-size:10px}
.friend-info small.friend-note{margin-top:3px;font-size:9px;opacity:.75}
.friend-info i{color:var(--accent);font-size:12px;font-style:normal;opacity:.7;transition:transform .2s,opacity .2s}
.friend-card:hover .friend-info i{transform:translate(2px,-2px);opacity:1}
.friend-request{margin-top:48px;padding:21px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.friend-request p{color:var(--muted);font-size:12px}
.friend-request pre{overflow:auto;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:10px}
.friend-request .text-link{font-size:11px}
.links-comments-intro{margin:0 0 18px;color:var(--muted);font-size:13px}
.links-comments{margin-bottom:72px}
@media(max-width:900px){.media-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.essay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album-grid{columns:3}}
@media(max-width:600px){.stats-page,.album-page,.friends-page,.media-page{padding-bottom:65px}.stats-overview{grid-template-columns:repeat(2,1fr);gap:9px}.stat-card{padding:13px}.stat-card strong{font-size:23px}.stats-panels{grid-template-columns:1fr;gap:11px}.stats-panel{padding:15px}.timeline-post{grid-template-columns:61px minmax(0,1fr) 42px;gap:6px;padding:9px 0}.album-grid{columns:2;column-gap:6px}.album-photo{margin-bottom:6px;border-radius:6px}.album-photo-caption{padding:22px 8px 8px;font-size:10px}.lightbox-dialog{padding:20px}.lightbox-nav{width:35px;height:35px}.lightbox-prev{left:7px}.lightbox-next{right:7px}.essay-grid{grid-template-columns:1fr;gap:11px}.essay-card>header{padding:12px 13px 6px}.media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.media-filters{gap:6px}.media-filters button{padding:6px 9px;font-size:9px}.media-details{padding:29px 8px 8px;transform:translateY(calc(100% - 30px))}.media-details h2{font-size:10px}.media-description{font-size:8px}.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.friend-preview{height:90px}.friend-info{gap:7px;padding:9px}.friend-info>img{width:32px;height:32px}}
@media(max-width:600px){.friends-grid{grid-template-columns:1fr}}

.links-page-hero h1{margin-bottom:8px}
.friends-avatars{align-items:center;padding-top:5px}
.friends-avatar-count{display:grid;width:38px;height:38px;place-items:center;margin-left:-7px;border:2px solid var(--surface);border-radius:50%;background:var(--soft);color:var(--muted);font-size:10px;font-weight:700}
.friends-category h2{margin-bottom:16px;font-size:20px}
.friends-grid{grid-template-columns:1fr;gap:16px}
.friend-card{border:0;border-radius:9px;background:var(--soft)}
.friend-card:hover{transform:none;border-color:transparent;box-shadow:none}
.friend-info{min-height:0;gap:16px;padding:16px}
.friend-info>img,.friend-avatar-fallback{width:48px;height:48px;border:2px solid var(--surface)}
.friend-info b{font-size:18px;font-weight:600}
.friend-info small{margin-top:1px;font-size:14px}
.til-content.content-width{width:min(1800px,calc(100% - 48px));max-width:none;margin:0 auto;padding-bottom:80px}
.til-item{display:grid;grid-template-columns:minmax(170px,280px) 1px minmax(0,1fr);column-gap:clamp(36px,6vw,96px);align-items:stretch;padding:24px 0 40px}
.til-item-date{grid-column:1;grid-row:1;padding-top:3px;color:var(--text);text-align:right;white-space:nowrap;font-family:"DM Mono",monospace;font-size:15px;font-weight:700}
.til-item-timeline{position:relative;grid-column:2;grid-row:1;margin-bottom:-40px;background:var(--line)}
.til-item-timeline::before{position:absolute;top:12px;left:-16px;width:64px;border-top:1px solid var(--text);content:""}
.til-item-timeline::after{position:absolute;top:2px;left:-10px;width:20px;height:20px;border:2px solid var(--text);border-radius:50%;background:var(--surface);content:""}
.til-item-content{grid-column:3;grid-row:1;min-width:0;padding-bottom:4px}
.til-item-content>p:first-child{margin-top:0;color:var(--text);font-size:24px;font-weight:700;line-height:1.35}
.til-item-content p{margin:0 0 18px}
.til-item-content pre{margin:18px 0 28px}
.til-page-hero h1{margin-bottom:8px}
@media(min-width:640px){.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.friends-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.friends-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){
  .til-content.content-width{width:calc(100% - 32px);padding-bottom:55px}
  .til-item{grid-template-columns:1px minmax(0,1fr);column-gap:20px;padding:16px 0 28px}
  .til-item-date{grid-column:1 / -1;grid-row:1;padding:0 0 12px;text-align:left;font-size:13px}
  .til-item-timeline{grid-column:1;grid-row:2;margin-bottom:-28px}
  .til-item-timeline::before{top:10px;left:-8px;width:26px}
  .til-item-timeline::after{top:1px;left:-8px;width:16px;height:16px}
  .til-item-content{grid-column:2;grid-row:2}
  .til-item-content>p:first-child{font-size:19px}
}

:root {
  /* The extra 47px is the desktop nav inset plus brand mark and word spacing. */
  --page-gutter: max(71px, calc((100% - 1408px) / 2 + 47px));
}

.content-width {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
}

.page-hero.content-width {
  padding-inline: var(--page-gutter);
}

.blog-archive-layout.content-width,
.til-content.content-width,
.home-hero-inner.content-width {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
  max-width: none;
  transform: translateY(-32px);
}

.home-hero-copy {
  padding-left: 0;
}

.post-page-header-inner,
.post-page-meta,
.post-page-layout {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
  max-width: none;
  padding-inline: 0;
}

.post-page-comments {
  margin-left: 0;
}

.content-width.article-comments {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
  margin-inline: auto;
}

.page-content.content-width {
  margin-left: var(--page-gutter);
}

.til-item-content blockquote {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 53px;
  }

  .content-width.article-comments {
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    margin-inline: auto;
  }
}

.stats-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-hero h1 {
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.375;
  letter-spacing: -.05em;
}

.til-page-hero>p:last-child,
.stats-hero>p:last-child,
.links-page-hero>p:last-child {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 32px;
}

.stats-page {
  display: grid;
  gap: 22px;
  padding-top: 0;
}

.stats-page .stats-panel {
  min-width: 0;
  padding: 24px;
  border-radius: 16px;
}

.stats-page .stats-panel-heading {
  margin-bottom: 22px;
}

.stats-page .stats-panel-heading h2 {
  font-size: 23px;
  letter-spacing: -.035em;
}

.stats-page .stats-panel-heading .eyebrow {
  font-size: 10px;
  letter-spacing: .11em;
}

.stats-activity {
  padding-bottom: 18px !important;
}

.heatmap-scroll {
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-color: var(--line) transparent;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: 34px max-content;
  gap: 10px;
  width: max-content;
  min-width: 100%;
}

.heatmap-days {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  gap: 4px;
  padding-top: 24px;
  color: var(--muted);
  font-size: 10px;
}

.heatmap-days span {
  line-height: 12px;
}

.heatmap-chart {
  min-width: 0;
}

.heatmap-months,.heatmap-cells {
  display: grid;
  grid-template-columns: repeat(var(--week-count), 12px);
  gap: 4px;
  width: max-content;
}

.heatmap-months {
  height: 16px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
}

.heatmap-months span {
  white-space: nowrap;
}

.heatmap-cells {
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: column;
  grid-auto-columns: 12px;
}

.heatmap-cell,.heatmap-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--soft);
}

:root[data-theme="dark"] .heatmap-cell[data-level="0"],:root[data-theme="dark"] .heatmap-legend i[data-level="0"] {
  background: #273143;
}

.heatmap-cell {
  outline: none;
}

.heatmap-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.heatmap-cell[data-level="1"],.heatmap-legend i[data-level="1"] {
  background: #b9dfbd;
}

.heatmap-cell[data-level="2"],.heatmap-legend i[data-level="2"] {
  background: #72bd7b;
}

.heatmap-cell[data-level="3"],.heatmap-legend i[data-level="3"] {
  background: #438d50;
}

.heatmap-cell[data-level="4"],.heatmap-legend i[data-level="4"] {
  background: #245c32;
}

:root[data-theme="dark"] .heatmap-cell[data-level="1"],:root[data-theme="dark"] .heatmap-legend i[data-level="1"] {
  background: #173c29;
}

:root[data-theme="dark"] .heatmap-cell[data-level="2"],:root[data-theme="dark"] .heatmap-legend i[data-level="2"] {
  background: #21653b;
}

:root[data-theme="dark"] .heatmap-cell[data-level="3"],:root[data-theme="dark"] .heatmap-legend i[data-level="3"] {
  background: #2d8a4e;
}

:root[data-theme="dark"] .heatmap-cell[data-level="4"],:root[data-theme="dark"] .heatmap-legend i[data-level="4"] {
  background: #45b363;
}

.heatmap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.heatmap-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.stats-page .stats-overview {
  gap: 16px;
  margin: 0;
}

.stats-page .stat-card {
  min-height: 132px;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border-radius: 16px;
}

.stats-page .stat-card>span {
  font-size: 13px;
}

.stats-page .stat-card strong {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
}

.stats-page .stat-card>small {
  font-size: 11px;
}

.stats-status-grid,.stats-data-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 142px;
}

.year-progress {
  position: relative;
  width: 132px;
  height: 132px;
  flex: 0 0 132px;
}

.year-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.year-progress circle {
  fill: none;
  stroke-width: 8;
}

.year-progress-track {
  stroke: var(--soft);
}

.year-progress-value {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 270.18;
  stroke-dashoffset: 270.18;
  transition: stroke-dashoffset .6s ease;
}

.year-progress>span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.year-progress strong {
  font-size: 25px;
  line-height: 1.2;
}

.year-progress small,.status-details>span {
  color: var(--muted);
  font-size: 11px;
}

.status-details {
  display: grid;
  gap: 8px;
}

.status-details>strong {
  font-size: clamp(15px, 1.6vw, 20px);
}

.status-details>div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.status-details>div b {
  color: var(--text);
}

.status-details>div i {
  width: 3px;
  height: 3px;
  margin: 0 3px;
  border-radius: 50%;
  background: var(--muted);
}

.github-stats .stats-panel-heading>a {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.github-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.github-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--soft);
  color: var(--text);
}

.github-mark svg {
  width: 27px;
  height: 27px;
}

.github-profile-link>b,.github-profile-link>span:last-child {
  display: grid;
  gap: 2px;
}

.github-profile-link span:last-child b {
  font-size: 15px;
}

.github-profile-link small {
  color: var(--muted);
  font-size: 12px;
}

.github-metrics {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 20px;
}

.github-metrics>div {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 10px;
  background: var(--soft);
}

.github-metrics strong {
  font-size: 20px;
}

.github-metrics span {
  color: var(--muted);
  font-size: 10px;
}

.github-status {
  min-height: 17px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.stats-data-grid .stats-panel {
  min-height: 250px;
}

.stats-page .category-stats {
  gap: 17px;
}

.stats-page .category-stat {
  grid-template-columns:minmax(70px,auto) minmax(40px,1fr) 28px;
  gap: 12px;
  font-size: 12px;
}

.stats-page .stat-track {
  height: 8px;
}

.stats-page .year-chart {
  height: 183px;
  padding: 0 4px;
  background: repeating-linear-gradient(to bottom,transparent 0,transparent 44px,var(--line) 45px,var(--line) 46px);
}

.year-bars {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 8px;
}

.year-bar {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-rows: 20px minmax(0,1fr) 24px;
  justify-items: center;
  align-items: end;
  color: var(--muted);
}

.year-bar>b {
  color: var(--text);
  font: 10px "DM Mono",monospace;
}

.year-bar>span {
  width: min(24px,70%);
  min-height: 3px;
  align-self: end;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to top,var(--accent),color-mix(in srgb,var(--accent) 54%,#c4b5fd));
}

.year-bar>small {
  align-self: end;
  font-size: 10px;
}

.stats-page .stats-tags {
  margin: 0;
}

.stats-page .stats-tags .tag-cloud {
  gap: 10px;
}

.stats-page .stats-tags .tag-cloud a {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.stats-page .stats-tags .tag-cloud a:hover {
  border-color: var(--accent);
}

.stats-page .stats-tags .tag-cloud small {
  margin-left: 3px;
}

.stats-page .stats-note {
  margin: -6px 0 0;
  font-size: 11px;
}

@media (max-width: 900px) {
  .stats-page .stats-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .stats-status-grid,.stats-data-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .stats-page {
    gap: 14px;
    padding-top: 40px;
  }

  .stats-page .stats-panel {
    padding: 17px;
    border-radius: 13px;
  }

  .stats-page .stats-panel-heading {
    margin-bottom: 16px;
  }

  .stats-page .stats-panel-heading h2 {
    font-size: 20px;
  }

  .heatmap-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .stats-page .stat-card {
    min-height: 112px;
    padding: 15px;
  }

  .status-content {
    gap: 16px;
  }

  .year-progress {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
  }

  .status-details>strong {
    font-size: 15px;
  }

  .github-metrics {
    gap: 6px;
  }

  .github-metrics>div {
    padding: 9px;
  }

  .stats-page .category-stat {
    grid-template-columns:minmax(70px,auto) minmax(30px,1fr) 24px;
    gap: 8px;
    font-size: 11px;
  }

  .year-bars {
    gap: 3px;
  }

  .year-bar>small {
    font-size: 8px;
  }
}

@media (max-width: 767px) {
  .page-hero h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .til-page-hero,
  .links-page-hero {
    margin-bottom: 40px;
  }

  .til-page-hero>p:last-child,
  .stats-hero>p:last-child,
  .links-page-hero>p:last-child {
    margin-top: 16px;
    font-size: 18px;
    line-height: 28px;
  }
}