@media screen {
  #skills .app-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  #skills .tool-group { min-width: 0; }
  #skills .tool-group h3 { margin: 0 0 12px; text-align: center; font-size: 16px; }
  #skills .tool-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #skills .tool-group-ai .tool-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #skills .app-tile:last-child { grid-column: auto; }
}
@media screen and (min-width: 1001px) {
  #work .case-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; }
  #work .case-media-preview { gap: 14px; align-items: flex-start; justify-content: center; }
  #work .case-media-preview .case-video-frame { width: 300px; max-width: 300px; flex: 0 1 300px; }
  #work .case-media-preview .case-image-frame { width: 150px; max-width: 150px; flex: 0 1 150px; }
}
@media screen and (max-width: 767px) {
  #work .case-media-preview .case-video-frame { width: min(260px, 65%); max-width: 260px; flex-basis: 65%; }
  #work .case-media-preview .case-image-frame { width: min(130px, 30%); max-width: 130px; flex-basis: 30%; }
}
@media screen and (max-width: 600px) {
  #skills .app-dock { grid-template-columns: 1fr; gap: 20px; }
  #skills .tool-group h3 { text-align: left; }
}