/* Shared navigation only. No demo application or image is loaded for this preview. */
.demo-nav { position:relative; align-self:center; min-width:0; }
.demo-nav > summary { list-style:none; display:flex; gap:.45rem; align-items:center; min-height:48px; color:var(--pm-body); cursor:pointer; font-size:.9rem; white-space:nowrap; }
.demo-nav > summary::-webkit-details-marker { display:none; }
.demo-nav > summary[aria-current] { color:var(--pm-accent); font-weight:600; box-shadow:inset 0 -2px var(--pm-accent); }
.demo-nav > summary:focus-visible,.demo-nav a:focus-visible { outline:2px solid var(--pm-accent); outline-offset:4px; }
.demo-nav[open] > summary > span { transform:rotate(180deg); }
.demo-nav-panel { position:absolute; right:0; top:calc(100% + 12px); z-index:40; width:640px; max-width:calc(100vw - 40px); display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:24px; padding:24px; border:1px solid var(--pm-control-border); border-radius:12px; background:#332c22; color:#d7cfc0; box-shadow:0 14px 32px rgb(0 0 0 / .25); }
.demo-nav:not([open]) .demo-nav-panel { display:none; }
.demo-nav-panel .demo-nav-eyebrow { font-size:.74rem; letter-spacing:.1em; font-weight:700; color:#e6bb6a; margin:0 0 10px; }
.main-nav .demo-nav-story { display:flex; flex-direction:column; align-items:flex-start; gap:4px; white-space:normal; padding:10px 0; }
.demo-nav-story strong { color:#faf6ea; font-size:1.05rem; }
.demo-nav-story span { font-size:.9rem; line-height:1.5; }
.demo-nav-reasons { border-top:1px solid var(--pm-line); margin:12px 0 18px; padding-top:18px; }
.demo-nav-reasons ul { margin:0; padding-left:1.1rem; font-size:.85rem; line-height:1.55; }
.demo-nav-reasons li + li { margin-top:6px; }
.main-nav .demo-nav-all { display:flex; justify-content:center; min-height:48px; padding:10px 14px; border-radius:5px; background:#e6bb6a; color:#211d16; font-size:.87rem; font-weight:700; white-space:normal; text-wrap:balance; text-align:center; }
.main-nav .demo-nav-all:hover { color:#211d16; background:#efca85; }
.demo-nav-preview { display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--pm-line); padding-left:20px; }
.demo-nav-preview p { font-size:.92rem; line-height:1.5; color:#faf6ea; margin:20px 0 12px; }
.demo-nav-preview small { font-size:.8rem; line-height:1.5; }
.demo-nav-devices { display:flex; align-items:center; justify-content:center; gap:8px; min-height:184px; }
.demo-nav-device { flex:0 1 82px; min-width:0; height:170px; padding:14px 8px; border:3px solid #6b5c46; border-radius:14px; background:#211d16; box-shadow:0 6px 12px #211d16; transform:rotate(-7deg); }
.demo-nav-device + div { transform:rotate(7deg) translateY(12px); }
.demo-nav-device span { display:block; color:#faf6ea; font-size:.58rem; font-weight:700; }
.demo-nav-device i { display:block; padding:18px 0 8px; color:#e6bb6a; font-style:normal; font-size:.65rem; }
.demo-nav-device b { display:block; color:#faf6ea; font-size:.9rem; }
.demo-nav-device em { display:block; margin-top:10px; padding:3px; border-radius:3px; background:#e6bb6a; color:#211d16; text-align:center; font-style:normal; font-size:.65rem; }
@media(max-width:1360px) {
 .demo-nav { align-self:stretch; }
 .demo-nav > summary { justify-content:space-between; font-size:1.1rem; }
 .demo-nav-panel { position:static; width:auto; max-width:none; grid-template-columns:minmax(0,1fr); gap:0; margin:6px 0 12px; padding:12px 16px; box-shadow:none; border-radius:6px; }
 .demo-nav-preview,.demo-nav-reasons,.demo-nav-copy > .demo-nav-eyebrow { display:none; }
 .main-nav:popover-open .demo-nav-story { min-height:64px; }
 .main-nav:popover-open .demo-nav-all { font-size:1rem; margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) { .demo-nav * { scroll-behavior:auto; transition:none; } }