:root {
  --f-size-el: 32px;
  --f-size-l: 24px;
  --f-size-m: 16px;
  --f-size-s: 14px;
  --f-bold: 600;

  --gap: 10px;

  --shadow: 0px 10px 50px 0px var(--c-mask-1);

  --border-1: 2px solid var(--c-text-2);
  --border: 2px solid var(--c-border);
  --border1: 2px solid var(--c-text-1);

  --r: 10px;
  --r1: 15px;
  --r-100: 100%;

  --bg-blur: blur(50px)
}

@media (prefers-color-scheme: dark) {
  :root {
      --c-main: #704f39;

      --c-bg1: #5a4d43;
      --c-bg: #463935;

      --c-bg-g: #418077;
      --c-bg-g-l: #25635F;
      --c-bg-y: #D0782C;
      --c-bg-y-l: #BE6110;
      --c-bg-r: #B95239;
      --c-bg-r-l: #983227;

      --c-focus: #FF8852;
      --c-border: rgb(61, 41, 16);
      
      --c-text-top: rgb(238, 233, 221);
      --c-text: rgb(238, 233, 221);
      --c-text-1: rgba(238, 233, 221, 0.6);
      --c-text-2: rgba(238, 233, 221, 0.2);

      --c-err: rgba(255, 44, 79, 1);

      --c-mask2: rgba(255, 255, 255, 0.2);
      --c-mask1: rgba(255, 255, 255, 0.1);
      --c-mask: rgba(255, 255, 255, 0.05);
      --c-mask-1: rgba(0, 0, 0, 0.1);
  }
}

@media (prefers-color-scheme: light) {
  :root {
      --c-main: #FCC986;

      --c-bg1: #fff7eb;
      --c-bg: #FCEFDD;

      --c-bg-g: #7dc2b6;
      --c-bg-g-l: #60a19e;
      --c-bg-y: #FFA532;
      --c-bg-y-l: #FED593;
      --c-bg-r: #F18167;
      --c-bg-r-l: #F3BE9F;

      --c-focus: #FF6600;
      --c-border: rgb(61, 41, 16);

      --c-text-top: rgb(238, 233, 221);
      --c-text: rgb(61, 41, 16);
      --c-text-1: rgba(61, 41, 16, 0.6);
      --c-text-2: rgba(61, 41, 16, 0.2);

      --c-err: rgba(255, 44, 79, 1);

      --c-mask2: rgba(0, 0, 0, 0.2);
      --c-mask1: rgba(0, 0, 0, 0.1);
      --c-mask: rgba(0, 0, 0, 0.05);
      --c-mask-1: rgba(255, 255, 255, 0.1);
  }
}
header{
  height: 80px;
}
body {
    background-color: var(--c-bg);
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .extraLarge {
    color: var(--c-text);
    font-size: var(--f-size-el);
  }

  .large {
    color: var(--c-text);
    font-size: var(--f-size-l);
  }

  .medium {
    color: var(--c-text);
    font-size: var(--f-size-m);
  }

  .small {
    color: var(--c-text-1);
    font-size: var(--f-size-s);
  }

  .bold {
    font-weight: var(--f-bold);
    font-variation-settings: "wght" 700, "BEVL" 100;
  }
  .nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .textCenter{
    text-align: center;
  }

  p,h1,h2,a,h4 {
    margin: 0;
    padding: calc(var(--gap) / 2) var(--gap);
    width: 100%;
    border-radius: var(--r);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    font-family: '阿里妈妈方圆体 VF Regular';
    font-variation-settings: "wght" 500, "BEVL" 100;
  }

  .group {
		display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		padding: var(--gap);
		border-radius: var(--r);
	}
  .gap{
    gap: var(--gap);
  }
  .bg{
    background-color: var(--c-bg1);
  }
  .center {
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	.right {
		justify-content: flex-end;
		align-content: flex-end;
		align-items: flex-end;
	}
	.full {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}
	.h {
		flex-direction: row;
	}
	.v {
		flex-direction: column;
	}


  @font-face {
    font-family: "阿里妈妈方圆体 VF Regular";
    src: url("../fonts/AlimamaFangYuanTiVF-Thin.woff2") format("woff2"),
      url("../fonts/AlimamaFangYuanTiVF-Thin.woff") format("woff");
    font-display: swap;
  }

  .screenshot{
    width: 50%;
    border-radius: 25px;
    box-shadow: var(--shadow);
    border:#000 4px solid;
  }

  .screenshotG{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: var(--gap);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    backdrop-filter: var(--bg-blur);
  }

  .screenshotWrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto; 
  }
  
  .circleBg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%; 
    height: 50%;
    background: var(--c-focus); 
    border-radius: 50%;
    z-index: 0;
  }
  main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 800px;
  }
  a{
    background-color: var(--c-text);
    color: var(--c-bg);
    text-align: center;
    padding: calc(var(--gap) * 2);
    text-decoration: none;
    border-radius: 100px;
    max-width: 460px;
  }
  .button{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: var(--gap);
    flex-direction: column;
    align-items: center;
  }
  footer{
    height: 80px;
  }

  .logo{
    width: 80px;
    border-radius: 20px;
  }