/* Shared STARMUX navigation, isolated from page styles. */
:root{--smx-nav-height:80px}
html{scroll-padding-top:calc(var(--smx-nav-height) + 16px)}
#smx-nav-space{display:block;height:var(--smx-nav-height);flex:none;width:100%}
#smx-header,#smx-header *{box-sizing:border-box}
#smx-header{position:fixed;inset:0 0 auto;z-index:50;width:100%;height:var(--smx-nav-height);margin:0;padding:0 4%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:28px;color:#fff7e7;background:#352c23;font:14px/1.5 Arial,Helvetica,sans-serif;text-align:left;letter-spacing:normal;box-shadow:inset 0 -1px 0 #dec19633;transition:background-color .3s ease,box-shadow .3s ease}
#smx-header.smx-scrolled{background:rgba(43,34,27,.96);box-shadow:inset 0 -1px 0 rgba(222,193,150,.24),inset 0 1px 0 rgba(255,244,224,.05),0 8px 30px rgba(15,10,6,.12)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#smx-header.smx-scrolled{background:linear-gradient(115deg,rgba(63,49,37,.78),rgba(35,29,24,.84));-webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%)}}
#smx-header a{color:inherit;text-decoration:none;border:0;background:none;transform:none}
#smx-header .smx-brand{display:block;justify-self:start;font-size:25px;font-weight:500;letter-spacing:.21em;white-space:nowrap;line-height:1.2;padding:0}
#smx-header .smx-brand span{display:inline;font-size:28px;color:#a17d47;letter-spacing:.09em}
#smx-header .smx-brand i{display:inline;font-size:28px;font-style:normal;color:#e9c888;margin-left:8px}
#smx-links{display:flex;gap:clamp(16px,1.7vw,28px);align-items:center;justify-content:center}
#smx-links a{display:block;white-space:nowrap;padding:10px 0;font-size:14px;font-weight:400}
#smx-links a:hover,#smx-links a[aria-current=page],#smx-config-menu a:hover{color:#e8c581}
#smx-header button{appearance:none;font:inherit;color:inherit;cursor:pointer;letter-spacing:normal;text-transform:none;margin:0;border-radius:0;box-shadow:none;transform:none}
#smx-header .smx-nav-toggle{display:none;background:transparent;border:1px solid #d6ad6870;padding:10px 14px;align-items:center;gap:12px}
#smx-header .smx-picker{position:relative;justify-self:end}
#smx-header .smx-config-toggle{display:flex;align-items:center;gap:15px;border:1px solid rgba(222,193,150,.62);padding:12px 18px;color:#fff5e1;background:linear-gradient(135deg,rgba(218,180,122,.14),rgba(218,180,122,.035));box-shadow:inset 0 1px 0 rgba(255,240,214,.09);white-space:nowrap;min-height:46px;transition:background-color .2s ease,border-color .2s ease}
#smx-header .smx-config-toggle:hover,#smx-header .smx-config-toggle[aria-expanded=true]{background-color:rgba(218,180,122,.16);border-color:#dfc398}
#smx-header .smx-config-toggle>span{font-size:19px;line-height:1}
#smx-header #smx-config-menu{position:absolute;top:calc(100% + 12px);right:0;width:270px;padding:20px;background:linear-gradient(135deg,#352b23,#211c18);border:1px solid rgba(222,193,150,.28);box-shadow:inset 0 1px 0 rgba(255,240,214,.06),0 16px 42px rgba(0,0,0,.24);max-height:calc(100dvh - var(--smx-nav-height) - 28px);overflow:auto}
#smx-header [hidden]{display:none!important}
#smx-config-menu p{font:12px/1.6 Arial,Helvetica,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#d6ad68;margin:0 0 10px}
#smx-header #smx-config-menu a{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;font-size:16px;border-bottom:1px solid #d6ad6824}
#smx-header #smx-config-menu a:last-child{border-bottom:0}
#smx-header :is(a,button):focus-visible{outline:2px solid #e8c581;outline-offset:4px}
svg.ui-arrow,svg.smx-arrow{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.125em;overflow:visible;fill:none;stroke:currentColor}
@media(max-width:1200px){#smx-header{grid-template-columns:1fr auto auto;gap:18px;padding:0 6%}#smx-header .smx-nav-toggle{display:inline-flex}#smx-links{display:none;position:absolute;top:100%;left:6%;right:6%;padding:16px 22px;background:linear-gradient(135deg,#352b23,#211c18);border:1px solid rgba(222,193,150,.28);box-shadow:0 16px 42px #0004;max-height:calc(100dvh - var(--smx-nav-height) - 20px);overflow:auto;flex-direction:column;align-items:stretch;gap:0}#smx-links.smx-open{display:flex}#smx-header #smx-links a{padding:12px 4px;font-size:16px}#smx-links a+a{border-top:1px solid #d6ad681c}}
@media(max-width:600px){:root{--smx-nav-height:118px}#smx-header{grid-template-columns:1fr auto;gap:10px;padding:15px 6% 12px}#smx-header .smx-brand{font-size:20px;letter-spacing:3px}#smx-header .smx-brand span,#smx-header .smx-brand i{font-size:23px}#smx-header .smx-picker{grid-column:1/-1;justify-self:end}#smx-header .smx-config-toggle{padding:8px 14px;min-height:40px}#smx-header #smx-config-menu{width:min(280px,88vw)}}
@media(prefers-reduced-transparency:reduce){#smx-header.smx-scrolled{background:#352c23;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){#smx-header,#smx-header *{transition:none!important}}

.preview{top:calc(var(--smx-nav-height) + 24px)}

/* Compact mobile navigation: star picker before the labeled menu. */
#smx-header .smx-config-toggle .smx-config-label{font-size:14px;line-height:inherit}
#smx-header .smx-config-star{display:none}
@media(max-width:700px){
 :root{--smx-nav-height:76px}
 #smx-header{grid-template-columns:minmax(0,1fr) 44px 84px;gap:8px;padding:15px 4%;height:76px}
 #smx-header .smx-brand{font-size:20px;letter-spacing:3px}
 #smx-header .smx-brand span,#smx-header .smx-brand i{font-size:23px}
 #smx-header .smx-nav-toggle{grid-column:3;grid-row:1;justify-content:center;width:84px;height:44px;padding:0 10px;gap:8px}
 #smx-header .smx-picker{grid-column:2;grid-row:1;justify-self:end;position:static}
 #smx-header .smx-config-toggle{justify-content:center;width:44px;height:44px;min-height:44px;padding:0;gap:0}
 #smx-header .smx-config-label,#smx-header .smx-config-chevron{display:none}
 #smx-header .smx-config-star{display:block;font:normal 28px/1 Arial,Helvetica,sans-serif;color:#e9c888}
 #smx-header #smx-config-menu{width:min(280px,88vw);right:4%;top:calc(100% + 8px)}
}

/* Only the preview window stays below the mobile navigation. */
@media(max-width:800px){main .preview{display:contents;position:static}main .preview>.scene{position:sticky;top:var(--smx-nav-height);z-index:5;margin-top:0;background:var(--bg)}}

/* Consistent navigation states across all page themes. */
#smx-header #smx-links a,#smx-header #smx-config-menu a{color:#fff7e7}
#smx-header #smx-links a:is(:hover,:focus-visible,[aria-current="page"]),
#smx-header #smx-config-menu a:is(:hover,:focus-visible,[aria-current="page"]){color:#e8c581}