html{color-scheme:light}
:root{--bg:#fff;--ink:#111;--ink-2:#7a7a77;--hair:#d9d9d6;--f:"Helvetica Neue",Helvetica,-apple-system,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:13px;letter-spacing:.04em;text-transform:lowercase;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
main{flex:1;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left)) 24px max(16px,env(safe-area-inset-right))}
.mark{font-size:clamp(56px,14vw,168px);font-weight:400;letter-spacing:-.04em;line-height:.9;margin:0}
.sub{margin:18px 0 0;color:var(--ink-2);text-align:center}
.wrap{text-align:center}
nav{flex:none;display:flex;justify-content:center;gap:4px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--hair)}
nav a{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;padding:6px 0;color:var(--ink-2);font-size:11px;transition:color .2s}
nav a:hover,nav a[aria-current=page]{color:var(--ink)}
nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
nav a[aria-current=page] svg{stroke-width:1.4}
.copy{text-align:center;color:var(--ink-2);font-size:10px;padding:0 0 calc(10px + env(safe-area-inset-bottom));margin-top:-6px}
@media (max-width:420px){nav a{width:64px}}