.guide-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:38px;align-items:center}
.guide-hero-copy h1{font-size:clamp(3rem,5.3vw,4.6rem)}
.guide-hero-copy h1 em{font-style:normal;color:#9d5b29}
html[data-theme="night"] .guide-hero-copy h1 em{color:#ffda72}
.guide-hero-figure{width:min(100%,390px);margin:0;justify-self:center;text-align:center}
.guide-hero-image{display:block;width:100%;aspect-ratio:1;border-radius:10px;box-shadow:0 16px 32px #0005;background-repeat:no-repeat}
.guide-hero-image.realm{background:url('assets/brand/guide-realm.png') center/cover}
.guide-hero-image.friends{background:url('assets/brand/guide-icons-atlas.png') 0 100%/200% 200%}
.guide-hero-image.auction{background:url('assets/brand/guide-auction-gavel.png') center/cover}
.guide-hero-figure figcaption{margin-top:15px;color:var(--text);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:900;line-height:1.25}
.guide-gui-list{display:grid;gap:24px}
.guide-gui-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);overflow:hidden;background:var(--panel);border:2px solid var(--line);border-radius:8px;box-shadow:6px 6px 0 #0002}
.guide-gui-visual{display:grid;place-items:center;min-width:0;min-height:310px;padding:24px;background:linear-gradient(145deg,#1a211b,#0b0e0c)}
.guide-gui-visual img{display:block;max-width:100%;height:auto;image-rendering:pixelated}
.guide-gui-visual .guide-live-shot{width:min(100%,620px);box-shadow:0 14px 32px #0008}
.guide-pack-viewport{width:min(100%,528px);aspect-ratio:176/106;overflow:hidden;background:#416b4a;box-shadow:0 14px 32px #0008}
.guide-pack-viewport img{width:145.4545%;max-width:none;transform:translateY(-15.625%)}
.guide-gui-copy{align-self:center;padding:clamp(22px,3vw,36px)}
.guide-gui-copy h3{margin:5px 0 12px;font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.25}
.guide-gui-copy p{margin:0 0 13px;color:var(--muted);line-height:1.8}
.guide-gui-copy ol{margin:15px 0;padding-left:23px;line-height:1.8}
.guide-gui-copy li+li{margin-top:7px}
.guide-gui-note{font-size:.82rem;color:var(--muted);opacity:.9}
@media(max-width:900px){.guide-hero-grid,.guide-gui-card{grid-template-columns:1fr}.guide-hero-figure{width:min(100%,420px)}.guide-gui-visual{min-height:0}}
@media(max-width:620px){.guide-hero-grid{gap:28px}.guide-hero-figure{width:min(100%,360px)}.guide-gui-visual{padding:14px}.guide-gui-copy{padding:20px}.guide-gui-card{box-shadow:4px 4px 0 #0002}}