/* Design boards in the screen directory and their full-size viewer. */
.mockup-gallery{margin-bottom:36px}
.mockup-gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.mockup-gallery-heading h2{font-size:1.4rem;letter-spacing:-.04em}
.mockup-gallery-heading>span,.mockup-number{color:var(--peach);font-size:.875rem;white-space:nowrap}
.mockup-intro{color:var(--muted);font-size:1rem;line-height:1.6;margin:10px 0 22px}
.mockup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mockup-card{display:block;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--panel)}
.mockup-card:hover{border-color:var(--peach)}
.mockup-card>img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#101823}
.mockup-card-copy{display:flex;gap:12px;align-items:baseline;padding:18px}
.mockup-card-copy>div{flex:1;min-width:0}
.mockup-card-copy h3{font-size:1rem;line-height:1.4}
.mockup-card-copy p{margin-top:6px;color:var(--muted);font-size:.875rem;line-height:1.5}
.mockup-card-copy>span:last-child{color:var(--peach)}
.mockup-note{color:var(--muted);font-size:.8125rem;margin-top:14px}
.mockup-page{overflow:hidden}
#mockup-viewer{height:100vh;height:100dvh;display:flex;flex-direction:column}
.mockup-toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--bg)}
.mockup-back{display:flex;align-items:center;min-height:44px;font-size:.875rem;color:var(--muted)}
.mockup-title{display:flex;align-items:center;gap:16px}
.mockup-title span{color:var(--peach);font-size:.875rem}
.mockup-title h1{font-size:1.25rem;letter-spacing:-.035em}
.mockup-controls{display:flex;gap:8px}
.mockup-controls button,.mockup-controls a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:.875rem}
.mockup-controls button{background:var(--peach);border-color:var(--peach);color:var(--ink);font-weight:700}
.mockup-stage{flex:1;min-height:0;overflow:auto;padding:20px;display:flex;outline-offset:-4px;overscroll-behavior:contain;background:#090f17}
.mockup-stage>img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto;cursor:zoom-in}
.mockup-stage.is-zoomed{display:block}
.mockup-stage.is-zoomed>img{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out}
.mockup-stage>img[hidden]{display:none}
.mockup-image-error{margin:auto;color:var(--muted);line-height:1.6}
.mockup-image-error a{text-decoration:underline;color:var(--peach)}
.mockup-navigation{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.mockup-navigation a{display:flex;align-items:center;min-height:44px;color:var(--peach);font-size:.875rem}
.mockup-navigation p{font-size:.8125rem;line-height:1.5;color:var(--muted);text-align:center}
.mockup-empty{margin:auto;padding:24px;text-align:center}
.mockup-empty .secondary{margin-top:24px}
@media(max-width:600px){
  .mockup-grid{grid-template-columns:minmax(0,1fr)}
  .mockup-toolbar{gap:6px 12px;padding:8px 14px}
  .mockup-title{gap:10px}
  .mockup-title h1{font-size:1rem}
  .mockup-controls{width:100%;justify-content:flex-end}
  .mockup-stage{padding:10px}
  .mockup-navigation{gap:10px;padding-left:14px;padding-right:14px}
  .mockup-navigation p span{display:none}
}
@media(max-height:450px){.mockup-toolbar{padding:5px 14px;gap:8px}.mockup-controls{width:auto}.mockup-navigation{padding-top:0;padding-bottom:env(safe-area-inset-bottom)}.mockup-stage{padding:8px}}