/* Actual artifacts first; one visible action per project on the showcase. */
.playground-page { color: #151515; }
.playground-page .site-header,
.playground-page main,
.playground-page footer { width: min(1060px, calc(100% - 40px)); margin-inline: auto; }
.playground-page .site-header { min-height: 60px; }
.playground-page .site-header nav { align-items: center; gap: clamp(8px, 2vw, 22px); }
.playground-page main { display: block; }
.playground-intro { padding: 30px 0 27px; }
.playground-intro-top, .showcase-detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.playground-languages { display: flex; align-items: center; gap: 12px; flex: none; }
.playground-languages a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; text-decoration: none; }
.playground-languages a:hover { color: var(--link); text-decoration: underline; }
.playground-languages a[aria-current="page"] { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 5px; }
.playground-page h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 650; letter-spacing: -.045em; line-height: 1.15; }
.playground-intro p { margin: 8px 0 0; color: #505050; font-size: 15px; }
.showcase { padding-bottom: 66px; }
.showcase-featured { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 48px); }
.showcase-media { display: block; overflow: hidden; border: 1px solid #e5e5e5; border-radius: 12px; background: #f6f6f6; }
.showcase-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.showcase-media--banner img { aspect-ratio: 10 / 3; object-fit: contain; }
.showcase-media:hover { border-color: #9aa0a6; }
.showcase h2 { font-size: clamp(21px, 2.3vw, 30px); font-weight: 650; letter-spacing: -.025em; line-height: 1.3; }
.showcase h2 a { color: inherit; text-decoration: none; }
.showcase h2 a:hover { text-decoration: underline; }
.showcase-featured-copy p { margin: 9px 0 0; color: #454545; font-size: 18px; line-height: 1.5; }
.showcase-action { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-top: 14px; color: var(--link); font-size: 15px; font-weight: 650; text-decoration: none; }
.showcase-action:hover { text-decoration: underline; }
.showcase-action:active { opacity: .7; }
.showcase-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); margin-top: 42px; }
.showcase-more .showcase-project:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 48px); }
.showcase-more .showcase-project:last-child .showcase-media { margin-bottom: 0; }
.showcase-project { min-width: 0; }
.showcase-project .showcase-media { margin-bottom: 16px; }
.showcase-project:not(:has(.showcase-media)) { padding-top: 15px; }
.showcase-project h2 { font-size: 22px; }
.showcase-project p { margin: 6px 0 0; color: #4c4c4c; font-size: 15px; line-height: 1.5; }
.showcase-project .showcase-action { margin-top: 6px; }
.playground-page footer { gap: 16px; }
.playground-page footer nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.playground-page footer nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.playground-page footer nav a:hover { text-decoration: underline; }

.showcase-detail { max-width: 750px; padding: 32px 0 80px; }
.showcase-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.showcase-detail h1 { margin-top: 19px; }
.showcase-detail-phrase { margin: 9px 0 0; font-size: 18px; }
.showcase-detail-image { display: block; max-width: 100%; height: auto; margin-top: 30px; border: 1px solid #e5e5e5; border-radius: 12px; }
.showcase-detail-description { margin: 24px 0 0; font-size: 16px; }
.showcase-detail-actions { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 14px; }
.showcase-detail-actions a { display: inline-flex; align-items: center; min-height: 44px; gap: 5px; font-size: 15px; }
.showcase-detail-actions .showcase-action { margin: 0; }

@media (max-width: 700px) {
  .playground-page .site-header,
  .playground-page main,
  .playground-page footer { width: calc(100% - 32px); }
  .playground-page .site-header { min-height: 54px; }
  .playground-page .site-header nav { gap: 8px; }
  .playground-page .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .playground-intro { padding: 22px 0 21px; }
  .playground-languages { gap: 9px; }
  .playground-languages a { font-size: 12px; }
  .showcase-detail-nav { flex-wrap: wrap; }
  .showcase-featured { display: block; }
  .showcase-featured-copy { margin-top: 16px; }
  .showcase-featured-copy p { font-size: 16px; }
  .showcase-featured-copy .showcase-action { margin-top: 6px; }
  .showcase-more { display: block; margin-top: 32px; }
  .showcase-project { margin-top: 32px; }
  .showcase-more .showcase-project:last-child { display: block; }
  .showcase-more .showcase-project:last-child .showcase-media { margin-bottom: 13px; }
  .showcase-project:not(:has(.showcase-media)) { padding-top: 0; }
  .showcase-project .showcase-media { margin-bottom: 13px; }
  .showcase { padding-bottom: 48px; }
  .showcase-detail { padding: 20px 0 64px; }
  .playground-page footer { align-items: flex-start; padding: 15px 0; }
}
@media (max-width: 360px) {
  .playground-page .site-header nav { gap: 5px; }
  .playground-page .site-header nav a { font-size: 11px; }
}