.app-showcase { margin: 0 0 3rem; }
.showcase-stage { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.8fr); gap: 2rem; align-items: center; padding: 2rem 0; border-block: 1px solid var(--el-hairline-strong); }
.showcase-copy { text-align: left; }
.showcase-tabs { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; margin-bottom: 2rem; }
.showcase-tabs button { font: inherit; color: var(--text-dim); text-align: left; min-height: 44px; border: 0; background: none; padding: .5rem 0; cursor: pointer; }
.showcase-tabs button[aria-selected="true"] { color: var(--el-violet-bright); font-weight: 600; }
.showcase-description h3 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 1rem; letter-spacing: -.025em; }
.showcase-description p { font-size: .875rem; line-height: 1.7; color: var(--text-dim); }
.showcase-caption { font-size: .75rem; color: var(--text-dim); margin-top: 2rem; }
.showcase-preview { min-width: 0; border: 1px solid var(--el-hairline-strong); border-radius: .75rem; overflow: hidden; background: var(--el-bg-2); box-shadow: var(--el-shadow-card); }
.showcase-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1070 / 670; object-fit: contain; }
.showcase-accordion { display:flex; gap:.45rem; padding:.45rem; height:clamp(13rem,36vw,29rem); }
.showcase-pane { position:relative; flex:0 0 clamp(2.8rem,6vw,4rem); min-width:0; padding:0; border:1px solid var(--el-hairline-strong); border-radius:.5rem; overflow:hidden; cursor:pointer; background:#130e1d; color:#fff; transition:flex .45s ease; }
.showcase-pane[aria-pressed="true"] { flex:1 1 0; border-color:var(--el-violet-bright); }
.showcase-pane img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
.showcase-pane[aria-pressed="true"] img { object-fit:contain; opacity:1; }
.showcase-pane span { position:absolute; z-index:1; inset:auto .25rem .4rem; padding:.45rem .15rem; font-size:.78rem; font-weight:700; background:#150d22eb; border-radius:.25rem; }
.showcase-pane[aria-pressed="false"] span { writing-mode:vertical-rl; inset:0; display:grid; place-items:center; background:#150d2294; }
.app-showcase .showcase-pane:focus-visible { outline-offset:-4px; }
.vitality-glass { margin-block:1.5rem 0; border-top:1px solid var(--el-hairline-strong); scroll-margin-top:6rem; }
.vitality-glass summary { cursor:pointer; padding:1rem 0; color:var(--el-violet-bright); }
.vitality-glass-stage { position:relative; display:grid; place-items:center; height:clamp(13rem,28vw,19rem); background:#100d17; border:1px solid var(--el-hairline-strong); border-radius:.75rem; overflow:hidden; margin-block:.5rem 1rem; }
.vitality-glass-stage.has-glass img { visibility:hidden; }
.vitality-glass-stage:not(.has-glass) canvas { visibility:hidden; }
.vitality-glass output { display:inline-block; margin-inline-start:.75rem; color:var(--text-dim); font-size:.85rem; }
@media (max-width:480px) { .showcase-accordion { height:clamp(9.5rem,48vw,14rem); } .showcase-pane span { font-size:.69rem; } }
@media (prefers-reduced-motion:reduce) { .showcase-pane { transition:none; } }
.showcase-expand { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: .75rem 1rem; font: inherit; font-size: .875rem; color: var(--text-light); border: 0; border-top: 1px solid var(--el-hairline); background: transparent; cursor: pointer; }
.showcase-expand:hover { color: var(--el-violet-bright); background: rgba(145,71,255,.06); }
@media(max-width: 760px) {
  .showcase-stage { grid-template-columns: 1fr; gap: 1.5rem; }
  .showcase-tabs { flex-direction: row; gap: 1.5rem; margin-bottom: 1rem; }
  .showcase-tabs button { font-size: .875rem; }
  .showcase-description h3 { font-size: 1.25rem; }
  .showcase-caption { margin-top: 1rem; }
}
.showcase-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  max-inline-size: calc(100% - 1.5rem);
  inline-size: 72rem;
  padding: clamp(.75rem, 2vw, 1.25rem);
  color: var(--text-light);
  background: var(--el-bg-2);
  border: 1px solid var(--el-hairline-strong);
  border-radius: var(--el-card-radius);
  box-shadow: var(--el-shadow-card);
  text-align: start;
}
.showcase-dialog::backdrop { background: rgba(10, 10, 12, .86); }
/* The site's custom cursor sits underneath the native modal's top layer. */
html.vit-cursor-active .showcase-dialog[open],
html.vit-cursor-active .showcase-dialog[open] *,
html.vit-cursor-active .showcase-dialog[open]::backdrop { cursor: auto !important; }
html.vit-cursor-active .showcase-dialog[open] button { cursor: pointer !important; }
.showcase-dialog header,
.showcase-dialog form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.showcase-dialog header { justify-content: space-between; margin-bottom: .75rem; }
.showcase-dialog h3 { font-size: clamp(1rem, 2vw, 1.45rem); }
.showcase-dialog button { inline-size: auto; min-height: 44px; padding: .45rem .8rem; font: inherit; cursor: pointer; }
.showcase-dialog button[aria-pressed="true"] { border-color: var(--el-violet-bright); }
.showcase-image-viewport { max-block-size: 72dvh; overflow: auto; }
.showcase-image-viewport img { display: block; inline-size: 100%; block-size: auto; max-block-size: 72dvh; object-fit: contain; }
.showcase-image-viewport.is-zoomed img { inline-size: 200%; max-inline-size: none; max-block-size: none; }
.app-showcase :focus-visible,
#download-changelog summary:focus-visible { outline: 2px solid var(--el-violet-bright); outline-offset: 3px; }
#download-changelog summary { cursor: pointer; min-height: 44px; }
#download-changelog summary h3 { display: inline; }
.showcase-dialog { max-block-size: calc(100dvh - 2rem); overflow: auto; }
.showcase-navigation { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .75rem; }
.showcase-position { font-size: .85rem; color: var(--text-light); text-align: center; }
.release-search { margin-block: 1rem 1.5rem; }
.release-search label { display: block; margin-bottom: .5rem; }
.release-search > div { display: flex; gap: .75rem; }
.release-search input { min-width: 0; flex: 1; min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--el-hairline-strong); background: var(--el-bg-2); color: var(--text-light); border-radius: .4rem; font: inherit; }
.release-search output { display: block; margin-top: .5rem; }
#download-changelog [hidden] { display: none !important; }
.release-search :focus-visible { outline: 2px solid var(--el-violet-bright); outline-offset: 3px; }
@media (max-width: 480px) {
  .showcase-navigation { flex-wrap: wrap; }
  .showcase-position { order: -1; flex-basis: 100%; }
  .showcase-image-viewport, .showcase-image-viewport img { max-block-size: 50dvh; }
}