/* Button and navigation styles adapted from pxaport/public/header.css and hero.css. */
:root{--px-button-surface:#0b0b0b;--px-button-text:#ddd;--px-button-line:#2c2c2c;--px-nav-bg:#0006;--px-nav-text:#a3a3a3}
:root[data-theme="light"]{--px-button-surface:#fffdfa;--px-button-text:#29211b;--px-button-line:#d7c7b8;--px-nav-bg:#e9dfd6;--px-nav-text:#625549}
.header .nav{position:relative;isolation:isolate;padding:6px;border:1px solid #ffffff14;border-radius:18px;background:var(--px-nav-bg);box-shadow:inset 0 2px 8px #0007}.header .nav>ul{gap:3px}.header .nav>ul>li>a{position:relative;z-index:1;justify-content:center;gap:8px;min-height:40px;padding:0 12px!important;border-radius:12px!important;color:var(--px-nav-text);font-size:12px!important;transition:color .2s ease;background:transparent!important;box-shadow:none!important}.header .nav>ul>li>a.active{color:var(--px-nav-text)!important}.header .nav>ul>li>a.is-highlighted{color:#0a0a0a!important}.px-nav-indicator{position:absolute;top:6px;left:0;height:calc(100% - 12px);z-index:0;pointer-events:none;border:1px solid #ffffffe6;border-radius:12px;background:linear-gradient(135deg,#fff,#d4d4d4);box-shadow:0 2px 12px #ffffff1f,inset 0 1px 0 #fff;transition:transform .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1)}.header .nav-more{z-index:2}.header .nav-more summary{min-height:40px;display:flex;align-items:center;border-radius:12px}.header .nav-more-panel{z-index:3}
.btn,.header .play,.sheet-btn{gap:18px;border-radius:12px!important;font-size:12px!important;font-weight:700;letter-spacing:-.01em;transition:transform .2s ease,background-color .2s ease,border-color .2s ease!important;box-shadow:none!important}.btn{min-height:40px;padding-inline:19px}.hero .btn{min-height:48px}.btn:before{content:none!important}.btn svg{transform:none!important}.btn.primary,.header .play,.sheet-btn.primary{border:1px solid #fff!important;background:#f5f5f5!important;color:#080808!important}.btn.primary:hover,.header .play:hover,.sheet-btn.primary:hover{background:#dedede!important;transform:translateY(-2px)}.btn.secondary,.sheet-btn:not(.primary){border:1px solid var(--px-button-line)!important;background:var(--px-button-surface)!important;color:var(--px-button-text)!important}.btn.secondary:hover,.sheet-btn:not(.primary):hover{border-color:#666!important;background:#141414!important;color:#ddd!important;transform:translateY(-2px)}.btn:active,.header .play:active,.sheet-btn:active{transform:scale(.97)!important}.sheet-btn{padding-inline:19px}.btn.link{color:var(--text-2)}
@media(min-width:72rem) and (max-width:86rem){.header .nav>ul>li>a{padding-inline:8px!important;font-size:11px!important;gap:5px}.header .nav-more summary{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.px-nav-indicator{transition:none}.btn:hover,.btn:active,.header .play:hover,.header .play:active,.sheet-btn:hover,.sheet-btn:active{transform:none!important}}
/* Synchronize the pxaport controls with The Springs seasonal theme. */
:root{--px-button-surface:var(--surface);--px-button-text:var(--text);--px-button-line:var(--line-2);--px-nav-bg:var(--bg-raised);--px-nav-text:var(--text-2);--px-accent:#ae450d;--px-accent-hover:#8e3709;--px-accent-text:#fff8ef;--px-highlight-start:#d66923;--px-highlight-end:#ae450d;--px-highlight-line:#d98449}
:root[data-theme="dark"]{--px-accent:#efa05e;--px-accent-hover:#ffc18b;--px-accent-text:#24160c;--px-highlight-start:#ffc18b;--px-highlight-end:#e8934e;--px-highlight-line:#ffc58f}
:root[data-theme="light"]{--px-button-surface:var(--surface);--px-button-text:var(--text);--px-button-line:var(--line-2);--px-nav-bg:var(--bg-raised);--px-nav-text:var(--text-2)}
.header .nav{border-color:var(--line-2);box-shadow:inset 0 2px 8px #5b2b131a}
.px-nav-indicator{border-color:var(--px-highlight-line);background:linear-gradient(135deg,var(--px-highlight-start),var(--px-highlight-end));box-shadow:0 2px 12px #d5772826,inset 0 1px 0 #ffc18b66}
.header .nav>ul>li>a.is-highlighted{color:var(--px-accent-text)!important}
.btn.primary,.header .play,.sheet-btn.primary{border-color:var(--px-highlight-line)!important;background:var(--px-accent)!important;color:var(--px-accent-text)!important}
.btn.primary:hover,.header .play:hover,.sheet-btn.primary:hover{background:var(--px-accent-hover)!important}
.btn.secondary:hover,.sheet-btn:not(.primary):hover{border-color:var(--brand)!important;background:var(--surface-3)!important;color:var(--text)!important}