.viewing-intro{text-align:center}
.viewing-intro h1{margin-top:24px}
.viewing-lead{font-size:var(--text-lg);color:var(--text-muted)}
.viewing-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:28px}
.viewing-trust{margin-top:22px;font-size:var(--text-sm);color:var(--text-muted)}
.viewing-window{max-width:1000px;margin:48px auto 0;padding:18px;border-radius:var(--r-halo);background:linear-gradient(115deg,var(--peach),var(--lilac),var(--sky));box-shadow:var(--shadow-halo);text-align:left}
.viewing-window .chrome{min-height:40px;border-radius:var(--r-card) var(--r-card) 0 0;color:var(--char-text)}
.viewing-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:32px;background:var(--char);color:var(--char-text);border-radius:0 0 var(--r-card) var(--r-card);box-shadow:inset 0 1px 0 var(--char-hi)}
.viewing-checks>div{min-width:0}
.viewing-checks strong{display:block;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);margin:12px 0}
.viewing-checks p{margin:0;color:var(--char-muted);font-size:var(--text-sm)}
.viewing-key{display:inline-block;padding:3px 9px;border:1px solid var(--char-hi);border-radius:var(--r-btn);font-size:var(--text-xs);color:var(--peach)}
.viewing-checks>div:nth-child(2) .viewing-key{color:var(--lilac)}
.viewing-checks>div:nth-child(3) .viewing-key{color:var(--sky)}
.viewing-guide{padding-top:24px}
.viewing-guide .prose h2:first-of-type{margin-top:0}
.viewing-next{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:32px}
@media(max-width:768px){
  .viewing-checks{grid-template-columns:1fr;gap:24px;padding:24px}
  .viewing-checks>div+div{padding-top:20px;border-top:1px solid var(--char-line)}
  .viewing-window{margin-top:32px;padding:12px}
  .viewing-guide{padding-top:16px}
}
@media(max-width:640px){
  .viewing-actions{gap:12px}
  .viewing-actions .btn{width:auto;flex:1;padding-inline:12px;font-size:var(--text-base)}
  .viewing-window .chrome{padding-inline:12px;gap:10px}
  .viewing-window .crumb{font-size:var(--text-xs);flex-wrap:wrap}
  .viewing-checks{padding:20px}
}