/* Shared navigation stays readable and reachable across desktop, tablet and phone. */
html{scroll-padding-bottom:110px}
.bottom-nav{width:min(560px,calc(100% - 32px));max-width:none;display:grid;grid-template-columns:.85fr 1.1fr 1fr 1fr;gap:5px;padding:8px;border:1px solid #fff;background:rgba(249,252,249,.96);border-radius:26px;overflow:visible;bottom:max(16px,env(safe-area-inset-bottom));box-shadow:0 12px 45px #193f3426;z-index:30}
.bottom-nav [data-nav]{appearance:none;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:56px;margin:0;padding:10px 8px;border:0;border-radius:19px;background:transparent;color:#50675f;text-decoration:none;font-family:inherit;font-size:13px;font-weight:500;line-height:1.25;cursor:pointer;transition:background .16s,color .16s}
.bottom-nav [data-nav] span{font-size:13px;font-weight:500;white-space:nowrap}
.bottom-nav [data-nav] svg{width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav [data-nav]:hover{background:#e6eee8;color:#1c4c3e}
.bottom-nav [aria-current="page"]{background:#dcebe2;color:#205e49;box-shadow:inset 0 0 0 1px #2c644f15}
.bottom-nav .join-nav{background:#275f4f;color:#fff}
.bottom-nav .join-nav:hover,.bottom-nav .join-nav[aria-current="page"]{background:#194a3b;color:#fff}
.bottom-nav [data-nav]:focus-visible{outline:3px solid #3e8066;outline-offset:3px;z-index:1}
.bottom-nav #demo-menu-trigger:has(.nav-current-demo:not([hidden])){display:grid;grid-template-columns:21px auto;gap:1px 7px;align-content:center}
.bottom-nav #demo-menu-trigger svg{grid-row:1/3}
.bottom-nav #demo-menu-trigger>span{justify-self:start}
.bottom-nav .nav-current-demo{font-size:9px!important;max-width:92px;overflow:hidden;text-overflow:ellipsis;color:#447460}
dialog.demo-menu{box-sizing:border-box;width:min(760px,calc(100vw - 40px));max-width:760px;max-height:calc(100dvh - 48px);margin:auto;padding:28px;border:1px solid #fff;border-radius:30px;background:#f7faf5;color:#203d34;box-shadow:0 30px 120px #092a3766;overflow-y:auto;overscroll-behavior:contain}
.demo-menu::backdrop{background:#102f2c70;backdrop-filter:blur(7px)}
.demo-menu-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.demo-menu-heading .eyebrow{margin:0 0 8px;font-size:10px;letter-spacing:.18em;color:#537363}
.demo-menu-heading h2{font-size:32px;line-height:1.1;letter-spacing:-1px;margin:0}
.demo-menu-heading .icon-button{position:static;width:44px;height:44px;min-width:44px;font-size:26px;background:#e7eee7;border:0}
#demo-menu-description{font-size:14px;line-height:1.6;color:#64786e;margin:12px 0 22px}
.demo-menu-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-menu-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #dce5d9;border-radius:19px;text-decoration:none;background:#fff;color:inherit;transition:box-shadow .16s,background .16s}
.demo-menu-card:hover{background:#f1f6ee;box-shadow:0 5px 18px #24574415}
.demo-menu-card.is-current{border-color:#54886d;box-shadow:0 0 0 1px #54886d}
.demo-menu-card>img{width:100%;height:105px;object-fit:cover;background:#dbe8db}
.demo-menu-card>div{padding:16px 18px 17px;display:flex;flex-direction:column;flex:1}
.demo-menu-meta{font-size:9px;letter-spacing:.12em;font-weight:600;color:#657c6d;margin:0 0 7px}
.demo-menu-card h3{font-size:20px;line-height:1.2;letter-spacing:-.5px;margin:0 0 8px}
.demo-menu-copy{font-size:13px;line-height:1.5;color:#60766a;margin:0 0 15px;flex:1}
.demo-menu-state{font-size:11px;font-weight:600;color:#2c6950;padding-right:10px}
.demo-menu-arrow{position:absolute;right:15px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f5faf4e8;color:#1a4939}
.demo-menu-footer{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding-top:22px;font-size:12px;color:#5f7869}
.demo-menu-footer a{color:#275f4f;font-weight:600;min-height:44px;display:inline-flex;align-items:center;gap:12px}
body:has(#demo-menu[open]){overflow:hidden}
@media(max-width:600px){
 .bottom-nav{width:calc(100% - 20px);grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:6px;border-radius:22px;bottom:max(10px,env(safe-area-inset-bottom))}
 .bottom-nav [data-nav],.bottom-nav #demo-menu-trigger:has(.nav-current-demo:not([hidden])){display:flex;flex-direction:column;gap:5px;min-height:58px;padding:8px 2px;border-radius:16px}
 .bottom-nav [data-nav] span{font-size:10px;letter-spacing:0}
 .bottom-nav [data-nav] svg{width:21px;height:21px}
 .bottom-nav .nav-current-demo{display:none!important}
 dialog.demo-menu{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:20px;border-radius:24px}
 .demo-menu-heading h2{font-size:27px}
 .demo-menu-list{grid-template-columns:1fr;gap:10px}
 .demo-menu-card{display:grid;grid-template-columns:88px 1fr}
 .demo-menu-card>img{height:100%;min-height:155px}
 .demo-menu-card>div{padding:14px 12px}
 .demo-menu-card h3{font-size:18px;padding-right:17px}
 .demo-menu-card .demo-menu-copy{font-size:12px;margin-bottom:10px}
 .demo-menu-meta{font-size:8px;letter-spacing:.08em}
 .demo-menu-arrow{top:10px;right:8px;width:23px;height:23px;font-size:12px}
 .demo-menu-footer{padding-top:12px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.bottom-nav [data-nav],.demo-menu-card{transition:none}}

/* Keep controls clear of device cutouts when the installed app fills the screen. */
@media(display-mode:fullscreen){body{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}@media(display-mode:fullscreen) and (min-width:900px){body[data-screen=home] main{height:calc(100dvh - 70px - env(safe-area-inset-top))}body[data-screen=experience] main{height:calc(100dvh - 64px - env(safe-area-inset-top))}}

.brand>.brand-mark{width:46px;height:46px;object-fit:contain;flex:none}
@media(max-width:600px){.brand>.brand-mark{width:36px;height:36px}}