/* GLOW — base / reset. Values come from tokens.css only. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--background);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-button)}
.icon{width:var(--icon-md);height:var(--icon-md);flex:0 0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* app viewport */
.app{
  width:100%;max-width:var(--viewport);margin:0 auto;
  height:100vh;height:100dvh;background:var(--background);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}
.app__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.page{padding:0 var(--page-x)}