*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#111;color:#f4efe6;font-family:"Space Grotesk",system-ui,sans-serif}
:root{--tabbar-h:64px;--focus:#ffd23f;--t-fast:180ms;--t-med:250ms}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
main{min-height:100dvh;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
main>section{animation:tab-in var(--t-med) ease-out both}
@keyframes tab-in{from{opacity:0;transform:translateY(8px)}}
.tabbar{position:fixed;inset:auto 0 0 0;z-index:100;display:grid;grid-template-columns:repeat(6,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:#111d;backdrop-filter:blur(12px);border-top:1px solid #fff2}
.tabbar a{display:grid;place-items:center;min-height:44px;color:#f4efe6b3;text-decoration:none;font-weight:600;font-size:12px;line-height:1;letter-spacing:.02em}
.tabbar a[aria-current=page]{color:var(--tab-accent,#ffd23f)}
@media (min-width:1024px){
  :root{--tabbar-h:0px}
  .tabbar{inset:0 auto 0 0;width:88px;height:auto;grid-template-columns:none;grid-auto-rows:72px;border-top:0;border-right:1px solid #fff2}
  main{margin-left:88px}
}
#notice{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:101;margin:0;padding:8px 14px;border-radius:99px;background:#ffd23f;color:#111;font:600 13px/1.3 system-ui}
.credit{font-size:11px;opacity:.75}.credit a{color:inherit;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}