.browser-toolbar nav { flex-wrap: wrap; }
.showcase { max-width: 1232px; margin: auto; padding: 30px 38px; color: var(--desktop-ink); }
body.showcase-active .desktop-shell, body.showcase-active #back-to-top-wrapper { display: none; }
.showcase-browser { position: relative; margin-bottom: 28px; }
.showcase-gallery { position: relative; }
.showcase-gallery .window-title .bevel-button { color: var(--desktop-ink); text-shadow: none; min-height: 25px; padding: 3px 8px; }
.showcase-titlebar { user-select: none; }
.showcase-controls { display: flex; gap: 3px; }
.showcase-controls .bevel-button { width: 25px; min-height: 23px; padding: 0; color: #694c7b; font: 18px/1 var(--font-role-pixel); text-shadow: none; }
.showcase-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px; }
.showcase-scale { display: flex; align-items: center; gap: 6px; font: 12px var(--font-role-ui); }
.showcase-scale select { min-height: 33px; padding: 4px 8px; }
.showcase-count { margin-left: auto; font: 12px var(--font-role-pixel); }
.showcase-tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 10px 3px; }
.showcase-tabs .bevel-button { border-bottom: 1px solid #a586b4; }
.showcase-tabs [aria-selected="true"] { background: var(--desktop-surface); position: relative; z-index: 1; box-shadow: inset 1px 1px white; }
.showcase-content { height: calc(100dvh - var(--showcase-toolbar-height, 190px) - 132px); min-height: 240px; overflow: auto; overscroll-behavior: contain; margin: 8px; border: 1px solid var(--desktop-edge); padding: 18px; background: var(--desktop-surface); }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 20px 16px; align-content: start; }
.showcase-grid.icons { grid-template-columns: repeat(auto-fill, minmax(125px,1fr)); }
.showcase-card { margin: 0; min-width: 0; }
.showcase-art { display: grid; place-items: center; width: 100%; aspect-ratio: 4/3; overflow: hidden; padding: 0; border: 1px solid #b398c6; background: #b8a0cd; box-shadow: inset 1px 1px #fff2fc, 2px 2px #decce4; cursor: zoom-in; }
.showcase-art canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.showcase-art img { width: calc(24px * var(--showcase-scale,2)); height: calc(24px * var(--showcase-scale,2)); image-rendering: pixelated; }
.showcase-card figcaption { font: 13px/1.5 var(--font-role-ui); padding: 8px 1px 0; display: flex; justify-content: space-between; gap: 5px; }
.showcase-card figcaption span:last-child { color: var(--desktop-muted); font: 12px var(--font-role-pixel); }
.showcase-grid.expanded { display: block; max-width: 800px; margin: auto; }
.showcase-grid.expanded .showcase-art { cursor: zoom-out; }
.showcase-grid.expanded.icons { max-width: 440px; }
.showcase-footer { flex: none; min-height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 5px 10px 8px; font: 12px var(--font-role-ui); }
html[data-wallpaper] .desktop-shell, html[data-wallpaper] #back-to-top-wrapper, html[data-wallpaper] .skip-link { display: none; }
html[data-wallpaper] body { overflow: hidden; }
.showcase-grid.windows .showcase-art { border: 3px solid; border-color: #fff2fc #725088 #725088 #fff2fc; padding: 4px; box-shadow: inset 1px 1px #c7b2e9, inset -1px -1px #725088; }
.showcase-grid.windows canvas { border: 1px solid; border-color: #725088 #fff2fc #fff2fc #725088; }
@media (max-width: 540px) {
  .showcase { padding: 16px 10px; }
  .showcase-browser { margin-bottom: 18px; }
  .showcase-content { height: calc(100dvh - var(--showcase-toolbar-height, 220px) - 108px); margin: 6px 3px; padding: 12px; }
  .showcase-tools { padding: 7px 5px; }
  .showcase-tabs { padding: 0 5px; }
  .showcase-tabs .bevel-button { padding: 6px 9px; }
  .showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px; }
  .showcase-grid.icons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .showcase-card figcaption { font-size: 12px; }
  .showcase-count { font-size: 11px; }
}

body.showcase-background { overflow: hidden; }
.showcase-background-back { position: fixed; top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); z-index: 20; }