:root{--nav-h:3.5rem}.site-nav{z-index:50;background:var(--color-bg);border-bottom:1px solid var(--color-border);transition:transform .25s;position:fixed;inset:0 0 auto}.site-nav--hidden{transform:translateY(-100%)}.site-nav__bar{align-items:center;gap:var(--space-3);height:var(--nav-h);max-width:72rem;padding:0 var(--space-3);margin:0 auto;display:flex}.site-nav__brand{align-items:center;gap:var(--space-2);color:inherit;white-space:nowrap;font-weight:700;text-decoration:none;display:inline-flex}.site-nav__links{gap:var(--space-3);margin-left:auto;font-size:.95rem;display:flex}.site-nav__links a{color:inherit;text-decoration:none}.site-nav__links a:hover{text-decoration:underline}.paw-icon{vertical-align:middle;flex:none;width:1.4em;height:1.4em}.account{margin-left:auto;position:relative}.site-nav__links+.account{margin-left:0}.site-nav__links a{position:relative}.collection-counter{border:2px solid var(--color-primary);background:var(--color-bg);min-width:3rem;color:var(--color-text);text-align:center;white-space:nowrap;padding:.35rem 1rem;font-size:1.25rem;font-weight:800;line-height:1.2;animation:.4s cubic-bezier(.2,.9,.3,1.3) counter-pop;position:absolute;top:calc(100% + .6rem);left:50%;transform:translate(-50%);box-shadow:0 6px 18px #0000004d}.collection-counter:before{content:"";border:9px solid #0000;border-bottom-color:var(--color-primary);position:absolute;bottom:100%;left:50%;transform:translate(-50%)}:is(.site-nav:has(.collection-counter),.tabbar:has(.collection-counter)){z-index:2100}.tabbar__item .collection-counter{top:auto;bottom:calc(100% + .6rem)}.tabbar__item .collection-counter:before{border-bottom-color:#0000;border-top-color:var(--color-primary);top:100%;bottom:auto}@keyframes counter-pop{0%{opacity:0;transform:translate(-50%)scale(.4)}to{opacity:1;transform:translate(-50%)scale(1)}}@media (prefers-reduced-motion:reduce){.collection-counter{animation:none}}.theme-toggle{margin-left:auto;font-size:1.1rem;line-height:1}.theme-toggle+.account{margin-left:0}.account__toggle{align-items:center;gap:var(--space-2);padding:var(--space-1);border:1px solid var(--color-border);background:var(--color-surface);color:inherit;cursor:pointer;border-radius:999px;display:inline-flex;position:relative}.account__bars{padding:0 var(--space-1);gap:3px;display:grid}.account__bars i{background:currentColor;border-radius:2px;width:16px;height:2px;display:block}.account__dot{background:var(--color-primary);min-width:1.25rem;height:1.25rem;color:var(--color-primary-text);border-radius:999px;place-items:center;padding:0 .3rem;font-size:.75rem;font-weight:700;display:grid;position:absolute;top:-6px;right:-6px}.account__panel{right:0;top:calc(100% + var(--space-2));min-width:14rem;padding:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);gap:2px;display:grid;position:absolute;box-shadow:0 8px 24px #0000001f}.account__name{margin:0 0 var(--space-1);padding:var(--space-1) var(--space-2);color:var(--color-muted);font-size:.875rem}.account__item{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius);color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;text-decoration:none;display:flex}.account__item:hover,.account__item:focus-visible{background:var(--color-bg)}.account__item{justify-content:flex-start}.account__item .icon{color:var(--color-muted);flex:none}.account__item--danger .icon{color:var(--color-danger)}.account__label{flex:1;min-width:0}.account__item--danger{color:var(--color-danger);border-top:1px solid var(--color-border);margin-top:var(--space-1);border-radius:0}@media (max-width:40rem){.site-nav__links{display:none}}main.page{max-width:68rem;padding:calc(var(--nav-h) + var(--space-4)) var(--space-3) calc(var(--space-4)*2);margin:0 auto}.page__title{margin:0 0 var(--space-2);font-size:clamp(1.6rem,4vw,2.2rem)}.page__lead{color:var(--color-muted);margin:0 0 var(--space-4)}.theme-toggle{justify-content:center;align-items:center;min-width:2.75rem;min-height:2.75rem;display:inline-flex}.site-nav__brand{align-items:center;min-height:2.75rem;display:inline-flex}.nav-settings__icon,.tabbar{display:none}@media (max-width:40rem){.site-nav__bar{gap:var(--space-2);padding:0 var(--space-2)}.site-nav__brand{min-width:0;overflow:hidden}.site-nav__brand span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.site-nav__bar>.account{margin-left:auto}.nav-settings__label{display:none}.nav-settings__icon{display:inline}.nav-settings{justify-content:center;align-items:center;min-width:2.75rem;min-height:2.75rem;padding:0;font-size:1.1rem;display:inline-flex}.account__toggle{padding:2px var(--space-1) 2px 2px;border-width:1px;min-height:2.75rem}.account__dot{top:-2px;right:-2px}.account__panel{min-width:min(14rem,100vw - 2rem)}.tabbar{z-index:50;background:var(--color-surface);border-top:1px solid var(--color-border);padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:fixed;bottom:0;left:0;right:0}.tabbar__item{min-height:3.5rem;padding:0 var(--space-1);text-align:center;color:var(--color-muted);overflow-wrap:anywhere;justify-content:center;align-items:center;font-size:.85rem;font-weight:600;line-height:1.1;text-decoration:none;display:flex;position:relative}.tabbar__item[aria-current=page]{color:var(--color-primary)}.tabbar__item[aria-current=page]:before{content:"";background:var(--color-primary);border-radius:0 0 3px 3px;height:3px;position:absolute;top:0;left:25%;right:25%}main.page{padding-bottom:calc(3.5rem + env(safe-area-inset-bottom) + var(--space-4))}.site-nav__brand span{display:none}.site-nav .ui-btn{white-space:nowrap;min-height:2.75rem;padding:0 var(--space-3);flex:none;font-size:.85rem}.site-nav__bar{min-height:var(--nav-h)}.site-nav .nav-settings{justify-content:center;align-items:center;width:2.75rem;padding:0;display:inline-flex}.site-nav__bar>.theme-toggle{margin:0}.site-nav__bar>.ui-btn--secondary{margin-left:auto}}.nav-settings{white-space:nowrap;height:2.75rem;line-height:1}@media (max-width:40rem){.nav-settings__icon{line-height:1;display:block}.tabbar__item{flex-direction:column;gap:2px}.tabbar__item .icon{flex:none}}
