/* Opt-in layout for the portfolio. The original in-app guide stays unchanged. */
.portfolio { --top: 44px; --bot: 48px; }
.portfolio #app { padding: 0; gap: 0; }
.portfolio #rail { display: none; }
.portfolio #shell { width: 100%; max-width: none; height: 100%; border-radius: 0; box-shadow: none; flex: 1; overflow: clip; }
.portfolio .view { transition: none; will-change: auto; }
.portfolio .view.hide { visibility: hidden; }
.portfolio #v-art { display: grid; grid-template: 'title' var(--top) 'progress' 2px 'demo' minmax(0, 1fr) 'steps' 136px 'sections' var(--bot) / minmax(0, 1fr); }
.portfolio #v-art > .tbar { grid-area: title; }
.portfolio #v-art > .prog { grid-area: progress; }
.portfolio #stage { grid-area: demo; min-height: 0; padding: 6px 8px; overflow: hidden; }
.portfolio #ph { border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.portfolio #ph .glass { pointer-events: none; }
.portfolio #v-art > .deck { grid-area: steps; border-top: 1px solid var(--line); min-width: 0; }
.portfolio #v-art > .bbar { grid-area: sections; }
.portfolio .tbar .ttl { font-size: 14px; line-height: 1.2; white-space: normal; }
.portfolio .count { font-size: 11px; padding-right: 8px; }
.portfolio .ib { padding: 7px; }
.portfolio .slide { padding: 8px 12px 4px; }
.portfolio .snum { display: none; }
.portfolio .stext { font-size: 13px; line-height: 1.45; }
.portfolio .slide > div[style] { font-size: 13px !important; margin: 0 0 4px !important; }
.portfolio .dots { padding: 1px 6px; gap: 3px; }
.portfolio .arw { padding: 3px 8px; }
.portfolio .dotwrap { gap: 5px; }
.portfolio .bbar { box-sizing: border-box; gap: 6px; padding: 4px 8px; }
.portfolio .bbtn, .portfolio .bbtn.ghost { padding: 6px 9px; min-height: 30px; border-radius: 6px; font-size: 12px; }
.portfolio #btnGo { display: none; }
@media (max-width: 539px) {
  .portfolio { --top: 44px; --bot: 48px; }
  .portfolio #v-art { grid-template-rows: var(--top) 2px minmax(0, 1fr) 136px var(--bot); }
  .portfolio #v-art > .deck { background: var(--bg2); }
  .portfolio .slide { padding: 12px 14px 4px; }
  .portfolio .stext { font-size: 14px; line-height: 1.5; }
  .portfolio .slide > div[style] { font-size: 13px !important; }
  .portfolio .dots { min-height: 40px; padding: 0 6px; }
  .portfolio .arw { min-width: 42px; min-height: 40px; justify-content: center; align-items: center; }
  .portfolio .bbtn, .portfolio .bbtn.ghost { min-height: 40px; }
  .portfolio .ib { min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
}
@media (min-width: 540px) {
  .portfolio #v-art { grid-template: 'demo title' var(--top) 'demo progress' 2px 'demo steps' minmax(0, 1fr) 'demo sections' var(--bot) / minmax(270px, 58%) minmax(0, 1fr); }
  .portfolio #stage { border-right: 1px solid var(--line); }
  .portfolio #v-art > .deck { border-top: 0; }
  .portfolio .slide { padding: 20px 18px; }
  .portfolio .stext, .portfolio .slide > div[style] { font-size: 15px !important; }
  .portfolio .snum { display: flex; }
  .portfolio .dots { padding: 8px 6px; }
}
.portfolio #v-art:has(#stage:empty) {
  grid-template: 'title' var(--top) 'progress' 2px 'steps' minmax(0, 1fr) 'sections' var(--bot) / minmax(0, 1fr);
}
.portfolio #stage:empty { display: none; }