/* Project bento ported from https://yuri.ly/assets/site.css.
   Original card geometry, type scale, window crop and responsive breakpoints.
   Scoped to avoid the earlier portfolio-card experiments in polish.css. */
.reference-projects {
  --ink: #1d1d1f;
  --ink2: #636366;
  --chip: #f0f0f2;
  --ref-card: #fff;
  --ref-line: rgb(0 0 0 / .07);
  --ref-shadow: 0 1px 1px rgb(0 0 0 / .03), 0 4px 14px rgb(0 0 0 / .04);
  color: var(--ink);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}
:root[data-theme="dark"] .reference-projects {
  --ink: #f5f5f7;
  --ink2: #a1a1a6;
  --chip: #262628;
  --ref-card: #161617;
  --ref-line: rgb(255 255 255 / .08);
  --ref-shadow: 0 0 0 1px rgb(255 255 255 / .04);
}
.reference-projects.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; grid-auto-flow: row; }
.reference-projects .w2 { grid-column: span 3; }
.reference-projects .ref-card {
  position: relative; min-width: 0; background: var(--ref-card); border: 0;
  border-radius: 28px; padding: 24px; gap: 12px; box-shadow: var(--ref-shadow);
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; text-decoration: none; color: inherit; font: inherit;
  transition: transform 180ms var(--motion-ease);
}
.reference-projects > .ref-card:not(.mini) { min-height: 168px; }
.reference-projects button.ref-card { width: 100%; height: 100%; }
.reference-projects .tap { cursor: pointer; }
.reference-projects .tap:active { transform: scale(.97); transition-duration: 120ms; }
.reference-projects .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.reference-projects .hd .id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reference-projects .more, .reference-projects .external { flex: none; position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--chip); color: var(--ink2); }
.reference-projects .more::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M14 4.5h5.5V10M19.5 4.5L13.5 10.5M10 19.5H4.5V14M4.5 19.5l6-6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.reference-projects .t { font-weight: 600; font-size: 19px; line-height: 1.2; text-wrap: balance; }
.reference-projects .s { font-size: 14px; color: var(--ink2); line-height: 1.42; text-wrap: pretty; }
.reference-projects .ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.reference-projects .ico .glyph { width: 25px; height: 25px; }
.reference-projects .ico.blue { background: #dfeafd; color: #305ca5; }
.reference-projects .ico.orange { background: #ffe9d6; color: #a46125; }
.reference-projects .ico.pink { background: #fce3ea; color: #a23665; }
.reference-projects .ico.neutral { background: var(--chip); color: var(--ink); }
/* Shared project metadata: links and type labels use one size in every card. */
.reference-projects .chips, .case-dialog .project-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.reference-projects .chip, .case-dialog .chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; max-width: 100%; padding: 6px 10px; border: 0; border-radius: 99px;
  background: var(--card2); color: var(--muted);
  font-family: var(--site-font); font-size: 11px; font-weight: 500; line-height: 16px;
  text-decoration: none; overflow-wrap: anywhere;
}
.reference-projects .project-tags { position: relative; z-index: 4; flex: none; pointer-events: none; }
.reference-projects .project-tags a { pointer-events: auto; }
.reference-projects a.chip:hover, .reference-projects a.ref-card:hover .chip:first-child,
.case-dialog a.chip:hover { background: var(--accent-soft); color: var(--text); }
.reference-projects a.chip:focus-visible, .case-dialog a.chip:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.reference-projects .project-link { border: 0; background: transparent; color: transparent; cursor: pointer; border-radius: inherit; }
.reference-projects .ref-card:has(.project-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* QuotLy's stat layout, with this site's existing channel figure. */
.reference-projects .q .fx { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.reference-projects .q .stats { display: flex; flex-wrap: wrap; gap: 8px 18px; flex: 0 1 auto; }
.reference-projects .q .stats .s { display: block; line-height: 1.25; }
.reference-projects .q .stats b { display: block; font-size: 26px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.reference-projects .github-activity { margin: 0; padding-top: 12px; border-color: var(--ref-line); }
.reference-projects .github-link { min-height: 24px; text-decoration: none; }

/* Hortay and More bots: a short row with icons, not full-height cards. */
.reference-projects .mini { justify-content: center; }
.reference-projects .mini .hd .id { flex: 1; }
.reference-projects .bots .hd .id { justify-content: space-between; gap: 16px; }
.reference-projects .bots .t { white-space: nowrap; }
.reference-projects .bots .row { display: flex; justify-content: flex-start; gap: 8px; }
.reference-projects .bots .row .mini-icon { flex: none; width: 36px; height: 36px; margin: 0; max-width: none; border: 0; border-radius: 10px; transform: none; box-shadow: none; }
.reference-projects .bots .row .glyph { width: 21px; height: 21px; }
.reference-projects .project-stack-count { margin: 0; align-self: center; color: var(--ink2); }
.reference-projects .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .reference-projects .capka.tap:hover .win { transform: rotate(0deg); }
}
@media (max-width: 900px) {
  .reference-projects.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .reference-projects .w2 { grid-column: span 2; }
}
@media (max-width: 520px) {
  .reference-projects > .ref-card:not(.mini) { min-height: 142px; }
  .reference-projects .bots .row { gap: 6px; }
  .reference-projects .bots .row .mini-icon { width: 30px; height: 30px; border-radius: 8px; }
}
@media (max-width: 380px) {
  .reference-projects .bots .hd .id { flex-wrap: wrap; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .reference-projects .capka .win { transition: none; transform: none; }
}
html[data-motion="off"] .reference-projects .capka .win { transform: none; }

/* Final reference pass: consistent controls, compact GitHub rhythm and touch layout. */
.reference-projects .more,
.reference-projects .external { transition: transform 180ms var(--motion-ease); }
.reference-projects .external { font-size: 0; }
.reference-projects .external::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 16.5l9-9M9.5 7.5h7v7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.reference-projects .tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; transition: none; }
.reference-projects .github { justify-content: flex-start; gap: 10px; }
.reference-projects .github-activity { padding-top: 10px; }
.reference-projects .github-activity-head,
.reference-projects .github-activity-head strong,
.reference-projects .github-months,
.reference-projects .github-detail { font-family: inherit; }
.reference-projects .github-link { margin-top: auto; }
.reference-projects .github-scroll { padding-block: 3px 5px; }
.reference-projects .q .stats b { font-size: 42px; }
.reference-projects .project-stack-count { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .reference-projects .tap:hover .more { transform: scale(1.12); }
  .reference-projects .tap:hover .external { transform: translate(2px, -2px); }
}
@media (max-width: 520px) {
  .reference-projects .bots .hd .id { flex-wrap: wrap; gap: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .reference-projects .tap,
  html:not([data-motion="full"]) .reference-projects .more,
  html:not([data-motion="full"]) .reference-projects .external,
  html:not([data-motion="full"]) .reference-projects .capka .win { transition: none !important; transform: none !important; }
}
html[data-motion="off"] .reference-projects .tap,
html[data-motion="off"] .reference-projects .more,
html[data-motion="off"] .reference-projects .external { transition: none; transform: none; }

/* Independent review: a single subtitle and tighter calendar rhythm fit the stats row. */
.reference-projects .github { gap: 8px; }
.reference-projects .github-activity { padding-top: 6px; }
.reference-projects .github-activity-head { margin-bottom: 4px; }
.reference-projects .github-months { height: 16px; }
.reference-projects .github-scroll { padding-block: 2px; }
.reference-projects .github-detail { margin-top: 4px; }
.reference-projects .github-link { min-height: 20px; }

/* Keep longer contribution summaries readable beside the reference-style previews. */
.reference-projects .quote-preview .quote-description {
  font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--ink2);
}
.reference-projects .q .quote-description { max-width: 38ch; }
.reference-projects .q .stats b { font-size: 32px; }

/* QuotLy-inspired message previews: readable, complete cards rather than a scaled page. */
.reference-projects > .ref-card.quote-preview { min-height: 320px; gap: 16px; }
.reference-projects .quote-body {
  display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 20px;
}
.reference-projects .quote-copy { min-width: 0; align-self: stretch; }
.reference-projects .quote-preview .quote-description { max-width: none; }
.reference-projects .quote-subscriber-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reference-projects .quote-channel {
  display: inline-flex;
  margin-top: 16px;
  color: var(--telegram-blue);
  font-size: 13px;
  font-weight: 500;
}
.reference-projects .quote-messages { display: grid; order: -1; align-self: center; width: 100%; max-width: 340px; gap: 18px; margin-block: auto; padding: 5px; }
.reference-projects .quote-message {
  position: relative;
  padding: 12px 14px;
  border-radius: 15px 15px 15px 5px;
  background: #202a39;
  color: #f5f8fc;
  box-shadow: 0 4px 12px rgb(12 29 49 / .13);
  transform: rotate(-3deg);
  transform-origin: center;
  transition: transform 180ms var(--motion-ease);
}
.reference-projects .quote-message:nth-child(2) { transform: translateX(4px) rotate(2deg); }
.reference-projects .quote-message-title { margin: 0 0 6px; color: #92cfff; font-size: 11px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.reference-projects .quote-author { display: block; margin-top: 7px; color: #f5f8fc; opacity: .7; font-size: 11px; font-weight: 400; line-height: 1.3; }
.reference-projects .quote-message p { font-size: 13px; line-height: 1.4; text-wrap: pretty; }
:root[data-theme="dark"] .reference-projects .quote-message { background: #233449; box-shadow: inset 0 0 0 1px rgb(146 207 255 / .1); }
@media (hover: hover) and (pointer: fine) {
  html[data-motion="full"] .reference-projects .quote-preview:hover .quote-message { transform: translateY(-2px) rotate(-1deg); }
  html[data-motion="full"] .reference-projects .quote-preview:hover .quote-message:nth-child(2) { transform: translate(4px, -2px) rotate(0); }
}
@media (max-width: 640px) {
  .reference-projects .quote-body { gap: 18px; }
  .reference-projects .quote-messages { gap: 14px; }
  .reference-projects .quote-message { max-width: 96%; }
  .reference-projects .quote-message:nth-child(2) { justify-self: end; }
  .reference-projects .quote-preview .quote-description { max-width: 36ch; }
  .reference-projects .quote-channel { margin-top: 10px; }
}
@media (forced-colors: active) {
  .reference-projects .quote-message { border: 1px solid CanvasText; }
}

/* Compact GitHub and its neighboring project launcher. */
.reference-projects > .ref-card.github,
.reference-projects > .ref-card.bots { padding: 16px 20px; }
.reference-projects > .ref-card.github { min-height: 0; gap: 6px; }
.reference-projects .github .hd .s { font-size: 13px; line-height: 1.35; }
.reference-projects .github-inner { width: 100%; min-width: 477px; }
.reference-projects .github-grid { grid-template-rows: repeat(7, 7px); }
.reference-projects .github-day { width: 100%; height: 7px; aspect-ratio: auto; }
.reference-projects .github-link { margin-top: 0; font-size: 13px; }
.github-detail[hidden] { display: none; }

/* Compact collection cover; the complete directory stays in its dialog. */
.reference-projects > #project-collection { min-height: 228px; padding: 16px 20px; gap: 12px; justify-content: flex-start; }
#project-collection .collection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#project-collection .collection-head .project-link { z-index: 2; border-radius: 28px; }
#project-collection .project-count { flex: none; color: var(--ink2); font-size: 12px; font-variant-numeric: tabular-nums; }
#project-collection .collection-description { display: block; font-size: 13px; line-height: 1.4; }
#project-collection .collection-preview { display: block; overflow: hidden; width: 100%; margin-top: auto; }
#project-collection .collection-track { display: flex; width: max-content; animation: collection-scroll 32s linear infinite; animation-play-state: paused; }
#project-collection .collection-track.is-running { animation-play-state: running; }
#project-collection .collection-group { display: flex; flex: none; gap: 8px; padding-right: 8px; }
#project-collection .project-teaser { display: flex; flex: 0 0 128px; width: 128px; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 10px; border: 1px solid var(--ref-line); border-radius: 12px; background: var(--ref-card); }
body #project-collection #project-stack .mini-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: 0; border-radius: 8px; }
#project-collection .mini-icon .glyph { width: 18px; height: 18px; }
#project-collection .project-teaser-name { min-height: 2.6em; color: var(--ink2); font-size: 11px; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
#project-collection .collection-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 13px; }
#project-collection .collection-pause { position: relative; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink2); cursor: pointer; }
#project-collection .collection-pause::after { content: ""; position: absolute; inset: -9px; }
#project-collection .collection-pause[hidden] { display: none; }
#project-collection .collection-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#project-collection .collection-pause .play-symbol { display: none; }
#project-collection .collection-pause.is-paused .pause-symbol { display: none; }
#project-collection .collection-pause.is-paused .play-symbol { display: block; fill: currentColor; stroke: none; }
#project-collection .collection-pause:hover { color: var(--ink); }
#project-collection .collection-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes collection-scroll { to { transform: translateX(-50%); } }
html[data-motion="off"] #project-collection .collection-track { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #project-collection .collection-track { animation: none; }
}
.github-tooltip {
  position: fixed; inset: auto; margin: 0; padding: 7px 10px;
  width: max-content; max-width: calc(100vw - 16px);
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--text);
  box-shadow: 0 2px 8px rgb(0 0 0 / .12);
  font: 12px/1.4 var(--site-font);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
  pointer-events: none;
}

/* Zoom into the left of each website; the tilted window bleeds past the card. */
.reference-projects.bento > .ref-card.capka {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-rows: auto 1fr auto; min-height: 280px; gap: 16px;
}
.reference-projects .capka .hd { grid-column: 1 / -1; }
.reference-projects .capka .tag { max-width: none; margin: 0; align-self: start; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--ink2); text-wrap: pretty; }
.reference-projects .capka .chips { grid-column: 1; max-width: none; }
.reference-projects .capka .win {
  position: relative; inset: auto; grid-column: 2; grid-row: 2 / 4;
  width: calc(100% + 42px); aspect-ratio: 4 / 3; margin: 0 -42px -58px 0;
  align-self: end; transform: rotate(-4deg); transform-origin: 20% 20%;
  border: 1px solid var(--ref-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 40px rgb(0 0 0 / .18);
  background: #fff; transition: transform 180ms var(--motion-ease);
}
/* 24QW, Learna and SelfMD reuse the same .capka/.win layout as Coffeeopia and Serious Science. */
.reference-projects .capka:is(.product-qw, .product-learna) .product-copy,
.reference-projects .capka.network-card .systems-copy {
  grid-column: 1; max-width: none; margin: 0; align-self: start; min-width: 0;
}
.reference-projects .capka:is(.product-qw, .product-learna, .network-card) > .project-tags { grid-column: 1; max-width: none; align-self: end; }
/* Decorative previews must not intercept the full-card project button. */
.reference-projects .capka .win[aria-hidden="true"],
.reference-projects .capka .win[aria-hidden="true"] * { pointer-events: none; }
html[data-motion="off"] .reference-projects .capka .win { transition: none; }
.reference-projects .capka .win img { display: block; width: 180%; max-width: none; height: auto; object-fit: contain; object-position: left top; }
.reference-projects .coffee-preview .win img { transform: translateX(-8%); }
.reference-projects .capka:focus-visible .win,
.reference-projects .capka:has(:focus-visible) .win { transform: rotate(0deg); transition: none; }
.reference-projects .selfmd-brand img,
.reference-projects .discover-brand img,
.reference-projects .science-brand img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
@media (max-width: 640px) {
  .reference-projects.bento > .ref-card.capka { grid-template-columns: minmax(0, 1fr); }
  .reference-projects .capka .win { grid-column: 1; grid-row: 4; order: 3; }
  .reference-projects .capka .chips { order: 2; }
}

/* Telegram products share one visual row on desktop and keep their own previews. */
@media (min-width: 641px) {
  .reference-projects > .telegram-project { grid-column: span 2; margin-top: 12px; }
  .reference-projects > .github { grid-column: 1 / span 3; }
  .reference-projects > #project-collection { grid-column: 4 / span 3; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .reference-projects > .telegram-project { grid-column: span 1; }
  .reference-projects > .github { grid-column: 1; }
  .reference-projects > #project-collection { grid-column: 2; }
}
@media (max-width: 640px) {
  .reference-projects > .telegram-project { grid-column: 1 / -1; margin-top: 12px; }
}

/* Telegram follows the same tilted, cropped-window language as the site previews. */
.reference-projects .telegram-project { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 280px; }
.reference-projects.bento > .ref-card.telegram-preview-hidden { display: flex; min-height: 193px; }
.reference-projects .telegram-preview-hidden .bot-open-link { gap: 6px; }
.reference-projects .telegram-preview-hidden .bot-open-link img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.reference-projects .telegram-project .telegram-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.reference-projects .telegram-project .quote-screenshot { aspect-ratio: 4 / 3; border: 0; background: transparent; }
.reference-projects .telegram-project .quote-screenshot img { width: 100%; transform: translateY(-1%); }
.reference-projects .telegram-project .quote-screenshot { margin-bottom: -22px; }
.reference-projects .telegram-project .bot-preview { display: block; margin-bottom: 0; padding: 0; background: var(--chat-ground); }
.reference-projects .telegram-project .bot-preview .bot-thread { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.reference-projects .telegram-project .bot-preview .bot-chat-body { height: 100%; min-height: 0; padding: 11px 9px; }
.reference-projects .telegram-project .bot-preview .bot-message-image { width: 94%; }
.reference-projects .telegram-project .bot-pause { position: absolute; z-index: 5; right: 24px; bottom: 24px; width: 26px; height: 26px; padding: 5px; border: 0; background: var(--chip); }
.reference-projects .telegram-project .project-tags { padding-right: 34px; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .reference-projects .telegram-project.bot-project:hover .win { transform: translateY(-10px) rotate(0deg); }
}
@media (max-width: 640px) {
  .reference-projects .telegram-project .bot-preview .bot-chat-body { min-height: 210px; }
  .reference-projects.bento > .ref-card.telegram-preview-hidden { min-height: 193px; }
}