@layer reset, base, frame, scenes, collection, details, responsive, motion;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote {
    margin: 0;
  }
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  button,
  input {
    font: inherit;
  }
  button {
    cursor: pointer;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button {
    color: inherit;
  }
  [hidden] {
    display: none !important;
  }
}
@layer base {
  :root {
    color-scheme: dark;
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    background: #0c1511;
    color: #f1f4e8;
    font-synthesis: none;
    --a: #c5f96b;
    --b: #a1b2a6;
    --c: #26372c;
    --d: min(1320px, calc(100% - 104px));
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
  }
  body {
    line-height: 1.7;
    font-size: 14px;
    overflow-wrap: break-word;
  }
  ::selection {
    background: var(--a);
    color: #14200e;
  }
  :focus-visible {
    outline: 3px solid var(--a);
    outline-offset: 6px;
  }
  button {
    border: 0;
  }
  h2 {
    font-size: clamp(27px, 2.5vw, 38px);
    line-height: 1.45;
    font-weight: 650;
    letter-spacing: -0.04em;
  }
  h2 em {
    color: var(--a);
    font-style: normal;
  }
  h3 {
    font-weight: 600;
    font-size: 19px;
    line-height: 1.6;
  }
  .n6x9d3p2,
  .w3s7n9c4,
  .y5c8n2p4,
  .a9r2v6k4,
  .f9b3n7k2 {
    width: var(--d);
    margin-inline: auto;
  }
  .n6x9d3p2 {
    padding-block: 82px;
  }
  .o2c8m4n6 {
    color: var(--a);
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: 13px;
  }
  .s7p3w8h2 {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
  }
  .s7p3w8h2 > p {
    color: var(--b);
    font-size: 12px;
    line-height: 1.9;
  }
  .j4s8n2y6,
  .v3c6a9m2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 13px 23px;
    border-radius: 6px;
    font-weight: 650;
    font-size: 13px;
    transition:
      transform 0.25s,
      box-shadow 0.25s,
      background 0.25s;
  }
  .j4s8n2y6 {
    color: #1a2e16;
    background: linear-gradient(110deg, #daf78a, #a6ed62);
    box-shadow: 0 8px 30px #95db3a0d;
  }
  .j4s8n2y6:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px #b8f75e2b;
  }
  .v3c6a9m2 {
    background: transparent;
    border: 1px solid #698064;
    color: #edf4df;
  }
  .v3c6a9m2:hover {
    background: #c5f96b12;
    transform: translateY(-3px);
  }
  .h5n8d2q7 {
    color: var(--a);
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 0;
    background: none;
    font-size: 12px;
  }
  .h5n8d2q7:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
  }
  .c6p9h2k8 {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-block: 28px 20px;
  }
  .u9c3j8f2 {
    color: var(--b);
    line-height: 1.95;
    max-width: 345px;
  }
  .a2m7v4s9 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
  }
  .t9q4b2m8 {
    color: #93a294;
    font-size: 11px;
    margin-top: 22px;
  }
  .e2w8n4b6 {
    position: fixed;
    left: 20px;
    top: -100px;
    z-index: 100;
    padding: 12px 20px;
    color: #16230d;
    background: var(--a);
  }
  .e2w8n4b6:focus {
    top: 14px;
  }
}
@layer frame {
  .x4g8m2p7 {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #0c1511ed;
    border-bottom: 1px solid #27352a;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .n9f5q3c8 {
    width: var(--d);
    margin: auto;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
  .u3t8k6z2 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 23px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.03em;
    line-height: 1.5;
  }
  .u3t8k6z2 small {
    display: block;
    font-size: 8px;
    color: var(--b);
    font-weight: 400;
    letter-spacing: 0.12em;
  }
  .b4q9s2v7 {
    display: inline-block;
    position: relative;
    width: 34px;
    height: 40px;
    border-radius: 54% 42% 53% 40%;
    transform: rotate(25deg);
    background: linear-gradient(150deg, #e1ffae, #83ce46);
    flex-shrink: 0;
  }
  .b4q9s2v7::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 25px;
    border-left: 2px solid #35652a;
    border-radius: 50%;
    top: 7px;
    left: 13px;
    transform: rotate(15deg);
  }
  .a5y9k2n8 {
    display: flex;
    gap: 32px;
    font-size: 13px;
    color: #afbbb0;
  }
  .a5y9k2n8 a {
    padding: 28px 0;
    position: relative;
  }
  .a5y9k2n8 a:hover,
  .a5y9k2n8 a[aria-current] {
    color: var(--a);
  }
  .a5y9k2n8 a[aria-current]::after {
    content: "";
    position: absolute;
    height: 2px;
    background: var(--a);
    bottom: 13px;
    left: 30%;
    right: 30%;
  }
  .d8s4l7c2 {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .f8v2m6r4 {
    border: 1px solid #596d45;
    border-radius: 5px;
    padding: 9px 16px;
    font-size: 12px;
    color: var(--a);
    white-space: nowrap;
  }
  .f8v2m6r4:hover {
    background: #b8e75c14;
  }
  .q5n2t9h8 {
    display: none;
    border: 1px solid var(--c);
    background: transparent;
    padding: 7px 10px;
    border-radius: 5px;
  }
  .m7k3x8w2 {
    width: var(--d);
    margin: auto;
    padding: 10px 0 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .m7k3x8w2 a {
    padding: 8px;
    color: var(--b);
  }
  .q4v8c2m6 {
    border-top: 1px solid var(--c);
    margin-top: 86px;
    background: #0a120e;
  }
  .x7b3p9n2 {
    width: var(--d);
    margin: auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 100px;
    padding-block: 60px 45px;
  }
  .x7b3p9n2 h2 {
    font-size: 14px;
    margin-block: 25px 10px;
  }
  .x7b3p9n2 p {
    color: #93a294;
    font-size: 12px;
    line-height: 2;
  }
  .x7b3p9n2 nav h3 {
    font-size: 14px;
    margin: 8px 0 24px;
  }
  .x7b3p9n2 nav > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 24px;
    margin-bottom: 22px;
  }
  .x7b3p9n2 nav a {
    color: var(--b);
    font-size: 12px;
  }
  .x7b3p9n2 nav a:hover {
    color: var(--a);
  }
  .t3k8n2w6 {
    width: var(--d);
    margin: auto;
    border-top: 1px solid #26342a;
    padding-block: 22px;
    display: flex;
    gap: 25px;
    align-items: center;
    color: #849588;
    font-size: 10px;
  }
  .t3k8n2w6 > a {
    margin-left: auto;
  }
}
@layer scenes {
  .v9a4n6c2 {
    width: var(--d);
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: 43% 57%;
    min-height: 610px;
    align-items: center;
    padding-bottom: 25px;
  }
  .z8d2p6h4 {
    padding: 24px 28px 24px 0;
    z-index: 1;
  }
  .l8r4c6w2 {
    color: var(--a);
    font-size: 12px;
    letter-spacing: 0.13em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .l8r4c6w2 > span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--a);
  }
  .k7w2b9e4 {
    font-size: clamp(46px, 4.4vw, 68px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.045em;
    margin: 22px 0;
  }
  .k7w2b9e4 span {
    font-size: 17px;
    letter-spacing: 0.22em;
    display: inline-block;
    margin-bottom: 13px;
    color: #d1dcc9;
    font-weight: 500;
  }
  .k7w2b9e4 em {
    color: var(--a);
    font-style: normal;
  }
  .z8d2p6h4 > .u9c3j8f2 {
    font-size: 13px;
    margin-top: 13px;
  }
  .h4x7q2n8 {
    color: #8fa18f;
    font-size: 10px;
    line-height: 1.8;
  }
  .t6m2w9s4 {
    margin-top: 27px;
    display: flex;
    gap: 20px;
    color: #a8b7a3;
    font-size: 11px;
  }
  .t6m2w9s4 span {
    border-left: 2px solid #658849;
    padding-left: 8px;
  }
  .e6p3v8n2 {
    position: relative;
    align-self: stretch;
    min-width: 0;
    margin-top: 9px;
    padding-bottom: 55px;
  }
  .u4y8d2j6 {
    position: relative;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    border-radius: 8px 80px 8px 8px;
    background: #243527;
  }
  .g7p2k8m4 {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.9s,
      visibility 0.9s;
  }
  .g7p2k8m4.q9t4r6w2 {
    opacity: 1;
    visibility: visible;
  }
  .g7p2k8m4 img {
    opacity: 0.85;
    transition: transform 6s ease-out;
    transform: scale(1.06);
  }
  .g7p2k8m4.q9t4r6w2 img {
    transform: scale(1);
  }
  .g7p2k8m4::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0c1713f5 0%, #0c17135c 37%, transparent 65%),
      linear-gradient(90deg, #0c151133, transparent);
    pointer-events: none;
  }
  .y8b4d1s6 {
    position: absolute;
    z-index: 2;
    left: 35px;
    right: 35px;
    bottom: 28px;
  }
  .t7f3h8x2 {
    font-size: 10px;
    color: #d6f69e;
    letter-spacing: 0.08em;
  }
  .k6r4z9v3 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 4px 0;
  }
  .y8b4d1s6 > p:last-of-type {
    font-size: 12px;
    color: #d2dfca;
  }
  .y8b4d1s6 button {
    margin-top: 20px;
    padding: 8px 12px;
    font-size: 11px;
  }
  .i3n7c9b2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .l6v9h3w8 {
    font-size: 9px;
    color: #99ad97;
    letter-spacing: 0.12em;
  }
  .l6v9h3w8 span {
    color: #edf6df;
    margin-left: 15px;
    letter-spacing: 0.05em;
  }
  .g5r8p2k4 {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .g5r8p2k4 button[data-scene-go] {
    width: 30px;
    height: 24px;
    background: transparent;
    position: relative;
    padding: 0;
  }
  .g5r8p2k4 button[data-scene-go]::after {
    content: "";
    display: block;
    height: 3px;
    background: #4d614c;
    border-radius: 3px;
  }
  .g5r8p2k4 button[aria-pressed="true"]::after {
    background: var(--a);
  }
  #carousel-pause {
    margin-left: 8px;
    padding: 4px 7px;
    font-size: 10px;
    background: #213222;
    color: #c4d6b7;
    border-radius: 3px;
  }
  .j9k4f2s8 {
    position: absolute;
    right: 20px;
    top: 25px;
    writing-mode: vertical-rl;
    color: #f4ffe2;
    font-size: 9px;
    letter-spacing: 0.2em;
    z-index: 3;
    text-shadow: 0 1px 4px #000;
  }
  .z5k8q3b2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 26px max(52px, calc((100% - 1320px) / 2));
    margin-top: 20px;
    border-block: 1px solid var(--c);
    background: #111e16;
    font-size: 12px;
    color: #a0b293;
  }
  .z5k8q3b2 > p {
    color: #e1edd2;
  }
  .z5k8q3b2 > p span {
    font-size: 20px;
    color: var(--a);
    margin-right: 10px;
  }
  .z5k8q3b2 > a {
    color: var(--a);
  }
}
@layer collection {
  .q9m2k5d8 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .s9k3v7x4 {
    min-width: 0;
  }
  .c4m9r2j7 {
    width: 100%;
    height: auto;
    aspect-ratio: 1.7;
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    padding: 0;
    display: block;
    background: #233e2d;
    text-align: left;
  }
  .c4m9r2j7 img {
    opacity: 0.85;
    transition:
      transform 0.6s,
      opacity 0.4s;
  }
  .c4m9r2j7::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0b170bd9, transparent 75%);
  }
  .w8e2q7l4 {
    position: absolute;
    font:
      italic 600 46px/1 Georgia,
      serif;
    left: 20px;
    bottom: 20px;
    color: #e2facb;
    z-index: 1;
  }
  .f2x8b4s9 {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    background: #15251bdd;
    color: #def0cb;
    font-size: 9px;
    border: 1px solid #b2cf8d4d;
    padding: 3px 8px;
    border-radius: 3px;
  }
  .s9k3v7x4 > div {
    padding-top: 18px;
  }
  .s9k3v7x4 h3 {
    font-size: 21px;
  }
  .s9k3v7x4 p {
    color: var(--b);
    font-size: 12px;
    margin: 4px 0 14px;
  }
  .s9k3v7x4:hover img {
    transform: scale(1.06);
    opacity: 1;
  }
  .w3s7n9c4 {
    border-block: 1px solid var(--c);
    padding-block: 44px;
  }
  .f6d2r8p4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .f6d2r8p4 article {
    padding: 18px 26px;
    border-left: 1px solid #293a2c;
    position: relative;
  }
  .f6d2r8p4 article:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .f6d2r8p4 article:last-child {
    padding-right: 0;
  }
  .k4u9g2a8 {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: var(--a);
    margin-bottom: 20px;
  }
  .p3b6f9k2 {
    position: absolute;
    right: 24px;
    top: 22px;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: #849a7e;
  }
  .f6d2r8p4 h3 {
    font-size: 16px;
    margin-bottom: 9px;
  }
  .f6d2r8p4 p {
    color: var(--b);
    font-size: 12px;
    line-height: 1.9;
  }
  .x6c3p9f4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
  }
  .x6c3p9f4 > p {
    color: #93a28d;
    font-size: 10px;
  }
  .k2v7m4q8 {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
  }
  .k2v7m4q8 button {
    background: #17251b;
    border: 1px solid #2c3c2c;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 12px;
    transition:
      background 0.2s,
      color 0.2s;
  }
  .k2v7m4q8 button span {
    margin-left: 7px;
    font-size: 9px;
    opacity: 0.6;
  }
  .k2v7m4q8 button[aria-pressed="true"] {
    background: var(--a);
    border-color: var(--a);
    color: #1e3214;
  }
  .k2v7m4q8 button:hover {
    border-color: var(--a);
  }
  .r8v3f6d2 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 19px;
  }
  .p5j2a8k6 {
    min-width: 0;
  }
  .a8d3f7w6 {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    display: block;
    position: relative;
    background: #203826;
  }
  .a8d3f7w6 img {
    transition:
      transform 0.5s,
      opacity 0.4s;
    opacity: 0.88;
  }
  .a8d3f7w6::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0b1c1577, transparent 55%);
  }
  .a8d3f7w6 .f2x8b4s9 {
    left: 9px;
    top: 10px;
    right: auto;
    font-size: 8px;
    padding: 2px 6px;
  }
  .b7e4p9y2 {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    right: 12px;
    width: 29px;
    height: 29px;
    background: #c5f96be0;
    color: #193512;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: transform 0.3s;
  }
  .p5j2a8k6:hover img {
    transform: scale(1.07);
    opacity: 1;
  }
  .p5j2a8k6:hover .b7e4p9y2 {
    transform: rotate(45deg);
  }
  .p5j2a8k6 h3 {
    margin: 12px 0 4px;
    font-size: 15px;
  }
  .p5j2a8k6 > p {
    font-size: 10px;
    color: var(--b);
    line-height: 1.8;
  }
  .y5c8n2p4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    padding: 42px 0 76px;
    align-items: end;
  }
  .b9p2h7s4 {
    min-width: 0;
  }
  .b9p2h7s4 .u9c3j8f2 {
    font-size: 11px;
    margin-top: 16px;
    max-width: none;
  }
  .n4e8w2v6 {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
  }
  .n4e8w2v6 button {
    width: 100%;
    background: none;
    display: grid;
    grid-template-columns: 44px 1fr 16px;
    gap: 14px;
    align-items: center;
    text-align: left;
    padding: 16px 10px;
    border-bottom: 1px solid var(--c);
    transition: background 0.25s;
  }
  .n4e8w2v6 button[aria-pressed="true"] {
    background: #c5f96b0c;
  }
  .n4e8w2v6 button:hover {
    background: #c5f96b12;
  }
  .r6h9v3u2 {
    color: #81917c;
    font:
      italic 30px/1.1 Georgia,
      serif;
  }
  .n4e8w2v6 button[aria-pressed="true"] .r6h9v3u2 {
    color: var(--a);
  }
  .n4e8w2v6 strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
  }
  .n4e8w2v6 small {
    display: block;
    color: #95a18d;
    font-size: 10px;
    margin-top: 4px;
  }
  .n4e8w2v6 button > span:last-child {
    color: var(--a);
  }
  .m2s7a9k4 {
    height: 550px;
    position: relative;
    overflow: hidden;
    background: #1e3324;
    border-radius: 70px 6px 6px 6px;
  }
  .m2s7a9k4::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0d1b14 0%, #0d1b14cc 27%, transparent 70%);
  }
  .m2s7a9k4 > div {
    position: absolute;
    z-index: 2;
    left: 32px;
    right: 32px;
    bottom: 30px;
  }
  .m2s7a9k4 h3 {
    font-size: 34px;
    margin-block: 7px;
  }
  .m2s7a9k4 p {
    color: #c1d0b5;
    font-size: 12px;
    margin-bottom: 22px;
  }
}
@layer details {
  #experience {
    border-top: 1px solid var(--c);
  }
  .f4p8j2c6 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .z9m6d2v7 {
    min-height: 600px;
    position: relative;
    background: radial-gradient(ellipse at 60% 35%, #426044, #1d3527 60%, #15291e);
    border-radius: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .z9m6d2v7::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border: 1px solid #b1d99026;
    border-radius: 50%;
    box-shadow:
      0 0 0 55px #b1d99008,
      0 0 0 110px #b1d99004;
  }
  .q8x3n6b2 {
    width: 252px;
    height: 490px;
    background: #0f1d15;
    border: 7px solid #8b9d85;
    box-shadow: 24px 34px 60px #0005;
    border-radius: 35px;
    padding: 15px 12px 10px;
    z-index: 1;
    position: relative;
    overflow: hidden;
    transition:
      width 0.6s,
      height 0.6s,
      border-radius 0.6s;
  }
  .w9n2k5h7 {
    width: 65px;
    height: 16px;
    background: #071009;
    border-radius: 20px;
    margin: -9px auto 15px;
  }
  .e3b7v9m4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    margin-bottom: 16px;
  }
  .e3b7v9m4 .b4q9s2v7 {
    width: 14px;
    height: 18px;
  }
  .e3b7v9m4 .b4q9s2v7::after {
    width: 4px;
    height: 10px;
    top: 3px;
    left: 5px;
    border-width: 1px;
  }
  .e3b7v9m4 > span:last-child {
    margin-left: auto;
    font-size: 7px;
    color: #b3c1a8;
  }
  .d7k2p8c4 {
    height: 210px;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
  }
  .d7k2p8c4::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0b1917, transparent);
  }
  .d7k2p8c4 > div {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 15px;
  }
  .d7k2p8c4 span {
    color: #e2f5be;
    font-size: 8px;
  }
  .d7k2p8c4 strong {
    display: block;
    font-size: 22px;
  }
  .d7k2p8c4 small {
    color: #c7dbbc;
    font-size: 8px;
  }
  .v6m9f3s2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 19px 0 10px;
  }
  .v6m9f3s2 strong {
    font-size: 10px;
  }
  .v6m9f3s2 span {
    font-size: 7px;
    color: var(--b);
  }
  .p7c2k8e4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .p7c2k8e4 > div {
    min-width: 0;
    overflow: hidden;
  }
  .p7c2k8e4 img {
    height: 80px;
    border-radius: 4px;
  }
  .p7c2k8e4 span {
    font-size: 8px;
    margin-top: 5px;
    display: block;
  }
  .h8y3v6n2 {
    display: flex;
    justify-content: space-around;
    font-size: 8px;
    padding-top: 13px;
    margin-top: 9px;
    border-top: 1px solid var(--c);
    color: #b5c9a5;
  }
  .a7p2w9h6 {
    position: absolute;
    bottom: 18px;
    font-size: 10px;
    color: #b8c9ad;
  }
  [data-device="desktop"] .q8x3n6b2 {
    width: 91%;
    height: 345px;
    border-radius: 12px;
    padding: 16px;
    border-width: 6px;
  }
  [data-device="desktop"] .w9n2k5h7 {
    display: none;
  }
  [data-device="desktop"] .d7k2p8c4 {
    height: 150px;
    width: 60%;
    float: left;
    margin-right: 16px;
  }
  [data-device="desktop"] .v6m9f3s2 {
    margin-top: 3px;
    display: block;
  }
  [data-device="desktop"] .v6m9f3s2 span {
    display: block;
  }
  [data-device="desktop"] .p7c2k8e4 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  [data-device="desktop"] .p7c2k8e4 > div {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  [data-device="desktop"] .p7c2k8e4 img {
    height: 45px;
    width: 33px;
  }
  [data-device="desktop"] .p7c2k8e4 span {
    font-size: 8px;
  }
  [data-device="desktop"] .h8y3v6n2 {
    clear: both;
    margin-top: 22px;
  }
  .m6q9d3k2 h3 {
    font-size: 33px;
    margin: 16px 0 23px;
  }
  .m6q9d3k2 ul {
    list-style: none;
    padding: 0;
    margin: 28px 0;
  }
  .m6q9d3k2 li {
    display: flex;
    flex-direction: column;
    padding: 13px 0 13px 20px;
    position: relative;
  }
  .m6q9d3k2 li::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--a);
    position: absolute;
    left: 0;
    top: 23px;
  }
  .m6q9d3k2 li strong {
    font-size: 13px;
    font-weight: 500;
  }
  .m6q9d3k2 li span {
    color: var(--b);
    font-size: 12px;
    margin-top: 4px;
  }
  .u8f3b6n2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .u8f3b6n2 li {
    display: flex;
    gap: 20px;
    padding-top: 16px;
  }
  .u8f3b6n2 li > span {
    color: var(--a);
    font:
      30px/1.2 Georgia,
      serif;
  }
  .u8f3b6n2 h3 {
    font-size: 16px;
  }
  .u8f3b6n2 p {
    font-size: 12px;
    color: var(--b);
    margin: 9px 0 16px;
  }
  .u8f3b6n2 a,
  .u8f3b6n2 button {
    font-size: 11px;
    color: var(--a);
    padding: 0;
    background: transparent;
  }
  .c3w8h2v6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  .c3w8h2v6 figure {
    padding: 26px;
    background: #142119;
    border: 1px solid #2a392a;
    border-radius: 6px;
  }
  .c3w8h2v6 figure > span {
    color: var(--a);
    font:
      50px/0.9 Georgia,
      serif;
    display: block;
    height: 38px;
  }
  .c3w8h2v6 blockquote {
    font-size: 13px;
    line-height: 1.95;
    min-height: 110px;
    color: #d3ddca;
  }
  .c3w8h2v6 figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--c);
    padding-top: 20px;
    margin-top: 22px;
    font-size: 12px;
  }
  .c3w8h2v6 figcaption b {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: #354b2f;
    color: #cbec9b;
    display: grid;
    place-items: center;
    font-weight: 400;
  }
  .c3w8h2v6 small {
    display: block;
    color: #8fa183;
    font-size: 9px;
    margin-top: 3px;
  }
  .a9r2v6k4 {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    border-top: 1px solid var(--c);
    padding-block: 70px;
  }
  .a9r2v6k4 .u9c3j8f2 {
    font-size: 12px;
    margin-top: 18px;
  }
  .s2j7p9w4 details {
    border-bottom: 1px solid #2d3d2b;
    padding-block: 20px;
  }
  .s2j7p9w4 details:first-child {
    padding-top: 0;
  }
  .s2j7p9w4 summary {
    cursor: pointer;
    color: var(--a);
    font-size: 10px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .s2j7p9w4 summary::-webkit-details-marker {
    display: none;
  }
  .s2j7p9w4 summary span {
    color: #d8e2d1;
    font-size: 14px;
  }
  .s2j7p9w4 summary b {
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
  }
  .s2j7p9w4 details[open] summary b {
    transform: rotate(45deg);
  }
  .s2j7p9w4 details p {
    font-size: 12px;
    color: var(--b);
    padding: 15px 20px 0 30px;
    line-height: 1.95;
  }
  .s2j7p9w4 details a {
    font-size: 11px;
    color: var(--a);
    margin: 12px 0 0 30px;
    display: inline-block;
  }
  .f9b3n7k2 {
    background: radial-gradient(ellipse at 0 0, #29432b, #172e1e 68%);
    border: 1px solid #547142;
    border-radius: 10px;
    padding: 52px 65px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 50px;
    position: relative;
    overflow: hidden;
  }
  .d2h8w4q6 {
    z-index: 1;
  }
  .d2h8w4q6 h2 {
    font-size: 36px;
  }
  .d2h8w4q6 > .a2m7v4s9 {
    margin-top: 12px;
    color: #d2e6b9;
  }
  .d2h8w4q6 > p:last-of-type {
    color: #b1c4a1;
    font-size: 12px;
    margin-top: 15px;
  }
  .n8p4c6r2 {
    border-left: 1px solid #537346;
    padding-left: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .n8p4c6r2 .b4q9s2v7 {
    width: 39px;
    height: 45px;
    margin-bottom: 18px;
  }
  .n8p4c6r2 > strong {
    font-size: 20px;
    font-weight: 500;
  }
  .n8p4c6r2 > p {
    font-size: 11px;
    color: #adc39c;
    margin: 6px 0 15px;
  }
  .n8p4c6r2 > div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 12px;
    border-bottom: 1px solid #4b673a;
  }
  .n8p4c6r2 b {
    color: #d3edb3;
    font-size: 10px;
    font-weight: 400;
    background: #bdfb6c12;
    padding: 2px 9px;
    border-radius: 3px;
  }
  .n8p4c6r2 small {
    color: #97b783;
    font-size: 9px;
    margin-top: 15px;
  }
  .v8c2m6p4 {
    width: min(850px, calc(100% - 36px));
    max-height: calc(100dvh - 50px);
    padding: 0;
    border: 1px solid #68834d;
    border-radius: 12px;
    background: #15261b;
    color: #eef4df;
    overflow-y: auto;
  }
  .v8c2m6p4::backdrop {
    background: #030a07d9;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .j2k7q9b4 {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    position: relative;
  }
  .j2k7q9b4 > img {
    min-height: 460px;
  }
  .j2k7q9b4 > div {
    padding: 46px 35px 35px;
  }
  .j2k7q9b4 h2 {
    margin-bottom: 12px;
    font-size: 33px;
  }
  #dialog-tag {
    font-size: 15px;
    color: #c7e5a1;
    margin-bottom: 20px;
  }
  #dialog-intro {
    font-size: 13px;
    line-height: 2;
    color: #c3d3b8;
  }
  #dialog-download {
    margin-top: 25px;
  }
  .n3w9h2f6 {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ebf7dc;
    background: #081c10cc;
    font-size: 22px;
    display: grid;
    place-items: center;
  }
  .o3n8k2v5 {
    padding: 18px;
    background: #203b20;
    text-align: center;
  }
}
@layer responsive {
  @media (min-width: 1600px) {
    .v9a4n6c2 {
      min-height: 700px;
    }
  }
  @media (max-width: 1100px) {
    :root {
      --d: calc(100% - 64px);
    }
    .a5y9k2n8 {
      gap: 20px;
    }
    .v9a4n6c2 {
      grid-template-columns: 46% 54%;
    }
    .k7w2b9e4 {
      font-size: 51px;
    }
    .z8d2p6h4 {
      padding-right: 20px;
    }
    .z8d2p6h4 .c6p9h2k8 {
      gap: 9px;
    }
    .z8d2p6h4 .j4s8n2y6,
    .z8d2p6h4 .v3c6a9m2 {
      padding: 11px 15px;
      gap: 12px;
      font-size: 11px;
    }
    .y8b4d1s6 {
      left: 24px;
      right: 24px;
    }
    .z5k8q3b2 {
      padding-inline: 32px;
      gap: 18px;
    }
    .r8v3f6d2 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 30px 22px;
    }
    .a8d3f7w6 {
      aspect-ratio: 3/4;
    }
    .y5c8n2p4 {
      gap: 40px;
    }
    .f4p8j2c6 {
      gap: 35px;
    }
    .f6d2r8p4 article {
      padding-inline: 17px;
    }
    .p3b6f9k2 {
      right: 16px;
    }
    .f6d2r8p4 h3 {
      font-size: 14px;
    }
    .f9b3n7k2 {
      padding: 40px;
      gap: 30px;
    }
    .n8p4c6r2 {
      padding-left: 30px;
    }
    .x7b3p9n2 {
      gap: 55px;
    }
  }
  @media (max-width: 820px) {
    .a5y9k2n8 {
      display: none;
    }
    .q5n2t9h8 {
      display: block;
    }
    .n9f5q3c8 {
      min-height: 78px;
    }
    .v9a4n6c2 {
      grid-template-columns: 1fr 1.1fr;
      min-height: 580px;
    }
    .k7w2b9e4 {
      font-size: 43px;
    }
    .a2m7v4s9 {
      font-size: 16px;
    }
    .u4y8d2j6 {
      min-height: 470px;
      border-top-right-radius: 50px;
    }
    .k6r4z9v3 {
      font-size: 30px;
    }
    .i3n7c9b2 {
      align-items: start;
      gap: 7px;
    }
    .l6v9h3w8 {
      max-width: 140px;
      font-size: 8px;
    }
    .l6v9h3w8 span {
      display: block;
      margin-left: 0;
    }
    .g5r8p2k4 {
      gap: 3px;
    }
    .g5r8p2k4 button[data-scene-go] {
      width: 20px;
    }
    .z5k8q3b2 > span:nth-of-type(3),
    .z5k8q3b2 > span:nth-of-type(4) {
      display: none;
    }
    .q9m2k5d8 {
      gap: 18px;
    }
    .s9k3v7x4 h3 {
      font-size: 18px;
    }
    .f6d2r8p4 {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 0;
    }
    .f6d2r8p4 article:nth-child(3) {
      border-left: 0;
      padding-left: 0;
    }
    .y5c8n2p4 {
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }
    .m2s7a9k4 {
      height: 500px;
    }
    .n4e8w2v6 button {
      grid-template-columns: 30px 1fr 12px;
      gap: 8px;
      padding-inline: 4px;
    }
    .n4e8w2v6 small {
      font-size: 9px;
    }
    .m2s7a9k4 > div {
      left: 22px;
      right: 22px;
    }
    .f4p8j2c6 {
      grid-template-columns: 1fr;
    }
    .m6q9d3k2 ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .z9m6d2v7 {
      min-height: 580px;
    }
    .u8f3b6n2 {
      gap: 20px;
    }
    .u8f3b6n2 li {
      display: block;
    }
    .u8f3b6n2 li > span {
      display: block;
      margin-bottom: 15px;
    }
    .c3w8h2v6 {
      gap: 15px;
    }
    .c3w8h2v6 figure {
      padding: 20px;
    }
    .c3w8h2v6 blockquote {
      min-height: 160px;
      font-size: 12px;
    }
    .a9r2v6k4 {
      gap: 30px;
      grid-template-columns: 0.7fr 1.3fr;
    }
    .f9b3n7k2 {
      padding: 35px 28px;
      gap: 25px;
    }
    .d2h8w4q6 h2 {
      font-size: 28px;
    }
    .n8p4c6r2 {
      padding-left: 24px;
    }
    .n8p4c6r2 > strong {
      font-size: 17px;
    }
    .x7b3p9n2 {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .x7b3p9n2 nav > div {
      grid-template-columns: repeat(4, 1fr);
    }
    .t3k8n2w6 {
      flex-wrap: wrap;
      gap: 7px 20px;
    }
  }
  @media (max-width: 600px) {
    :root {
      --d: calc(100% - 36px);
    }
    html {
      scroll-padding-top: 95px;
    }
    .n9f5q3c8 {
      min-height: 72px;
      gap: 12px;
    }
    .u3t8k6z2 {
      font-size: 19px;
      gap: 9px;
    }
    .u3t8k6z2 small {
      font-size: 6px;
    }
    .b4q9s2v7 {
      width: 27px;
      height: 33px;
    }
    .b4q9s2v7::after {
      height: 21px;
      left: 10px;
      top: 5px;
    }
    .d8s4l7c2 {
      gap: 8px;
    }
    .f8v2m6r4 {
      font-size: 10px;
      padding: 7px 8px;
    }
    .q5n2t9h8 {
      padding: 5px 7px;
      font-size: 11px;
    }
    .m7k3x8w2 {
      font-size: 11px;
      gap: 5px;
    }
    .v9a4n6c2 {
      display: block;
      margin-top: 15px;
      padding-bottom: 20px;
    }
    .z8d2p6h4 {
      padding: 20px 5px 28px;
    }
    .l8r4c6w2 {
      font-size: 10px;
    }
    .k7w2b9e4 {
      font-size: 54px;
      line-height: 1.2;
      margin-top: 15px;
    }
    .k7w2b9e4 span {
      font-size: 14px;
      margin-bottom: 13px;
    }
    .z8d2p6h4 > .u9c3j8f2 {
      max-width: 100%;
      font-size: 12px;
    }
    .z8d2p6h4 .c6p9h2k8 {
      margin-top: 22px;
    }
    .z8d2p6h4 .j4s8n2y6,
    .z8d2p6h4 .v3c6a9m2 {
      padding: 12px 17px;
      gap: 17px;
      font-size: 12px;
    }
    .h4x7q2n8 {
      font-size: 9px;
    }
    .t6m2w9s4 {
      margin-top: 18px;
    }
    .e6p3v8n2 {
      height: 430px;
      padding-bottom: 50px;
      margin-top: 5px;
    }
    .u4y8d2j6 {
      min-height: 0;
      border-radius: 6px 55px 6px 6px;
    }
    .y8b4d1s6 {
      bottom: 20px;
      left: 23px;
    }
    .k6r4z9v3 {
      font-size: 33px;
    }
    .l6v9h3w8 {
      max-width: none;
      font-size: 8px;
    }
    .l6v9h3w8 span {
      display: inline;
      margin-left: 8px;
    }
    .g5r8p2k4 button[data-scene-go] {
      width: 23px;
    }
    .z5k8q3b2 {
      margin-top: 0;
      padding: 20px 18px;
      gap: 10px;
      font-size: 9px;
    }
    .z5k8q3b2 > span {
      display: none;
    }
    .z5k8q3b2 > p {
      font-size: 11px;
    }
    .n6x9d3p2 {
      padding-block: 52px;
    }
    .s7p3w8h2 {
      display: block;
      margin-bottom: 25px;
    }
    .s7p3w8h2 > p {
      font-size: 11px;
      margin-top: 15px;
    }
    .s7p3w8h2 > a {
      margin-top: 16px;
    }
    .o2c8m4n6 {
      font-size: 9px;
      letter-spacing: 0.09em;
    }
    h2 {
      font-size: 27px;
    }
    .q9m2k5d8 {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .s9k3v7x4 {
      display: grid;
      grid-template-columns: 0.9fr 1fr;
      gap: 15px;
      align-items: center;
    }
    .c4m9r2j7 {
      aspect-ratio: 1.05;
    }
    .s9k3v7x4 > div {
      padding: 0;
    }
    .s9k3v7x4 h3 {
      font-size: 19px;
    }
    .s9k3v7x4 p {
      font-size: 10px;
      margin-top: 5px;
    }
    .s9k3v7x4 .f2x8b4s9 {
      font-size: 8px;
      top: 8px;
      right: 8px;
      padding: 2px 4px;
    }
    .w8e2q7l4 {
      font-size: 34px;
      bottom: 12px;
      left: 14px;
    }
    .w3s7n9c4 {
      padding-block: 35px;
    }
    .f6d2r8p4 {
      gap: 20px;
    }
    .f6d2r8p4 article {
      padding: 12px 0 !important;
      border-left: 0;
    }
    .k4u9g2a8 {
      margin-bottom: 17px;
    }
    .p3b6f9k2 {
      top: 17px;
      right: 0;
      font-size: 8px;
    }
    .f6d2r8p4 h3 {
      font-size: 14px;
    }
    .f6d2r8p4 p {
      font-size: 11px;
    }
    .x6c3p9f4 {
      display: block;
      margin-bottom: 22px;
    }
    .k2v7m4q8 {
      gap: 6px;
    }
    .k2v7m4q8 button {
      padding: 8px 11px;
      font-size: 10px;
    }
    .x6c3p9f4 > p {
      margin-top: 13px;
      font-size: 9px;
    }
    .r8v3f6d2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 25px 15px;
    }
    .a8d3f7w6 {
      aspect-ratio: 2/3;
    }
    .p5j2a8k6 h3 {
      font-size: 15px;
    }
    .p5j2a8k6 > p {
      font-size: 9px;
    }
    .t9q4b2m8 {
      font-size: 9px;
    }
    .y5c8n2p4 {
      grid-template-columns: 1fr;
      padding-block: 15px 48px;
      gap: 30px;
    }
    .b9p2h7s4 h2 br {
      display: none;
    }
    .n4e8w2v6 button {
      padding: 15px 10px;
      grid-template-columns: 36px 1fr 15px;
      gap: 13px;
    }
    .n4e8w2v6 small {
      font-size: 9px;
    }
    .m2s7a9k4 {
      height: 410px;
      border-top-left-radius: 50px;
    }
    .m2s7a9k4 h3 {
      font-size: 30px;
    }
    .z9m6d2v7 {
      min-height: 570px;
    }
    [data-device="desktop"] .q8x3n6b2 {
      height: 305px;
      padding: 10px;
    }
    [data-device="desktop"] .d7k2p8c4 {
      width: 55%;
      margin-right: 10px;
    }
    [data-device="desktop"] .d7k2p8c4 strong {
      font-size: 17px;
    }
    [data-device="desktop"] .d7k2p8c4 small {
      font-size: 7px;
    }
    [data-device="desktop"] .p7c2k8e4 span {
      font-size: 6px;
    }
    [data-device="desktop"] .v6m9f3s2 strong {
      font-size: 8px;
    }
    .m6q9d3k2 h3 {
      font-size: 28px;
    }
    .m6q9d3k2 ul {
      display: block;
      margin-block: 18px;
    }
    .u8f3b6n2 {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .u8f3b6n2 li {
      display: flex;
      gap: 20px;
    }
    .u8f3b6n2 li > span {
      min-width: 36px;
    }
    .u8f3b6n2 p {
      margin-block: 7px 10px;
    }
    .c3w8h2v6 {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .c3w8h2v6 blockquote {
      min-height: 0;
    }
    .c3w8h2v6 figcaption {
      margin-top: 16px;
      padding-top: 15px;
    }
    .a9r2v6k4 {
      grid-template-columns: 1fr;
      gap: 30px;
      padding-block: 42px;
    }
    .a9r2v6k4 h2 br {
      display: none;
    }
    .a9r2v6k4 .u9c3j8f2 {
      margin-top: 13px;
    }
    .s2j7p9w4 summary {
      gap: 13px;
    }
    .s2j7p9w4 summary span {
      font-size: 12px;
    }
    .s2j7p9w4 details p {
      font-size: 11px;
      padding-left: 24px;
    }
    .f9b3n7k2 {
      grid-template-columns: 1fr;
      padding: 32px 23px;
      gap: 30px;
    }
    .d2h8w4q6 h2 {
      font-size: 30px;
    }
    .d2h8w4q6 > .a2m7v4s9 {
      font-size: 15px;
    }
    .f9b3n7k2 .j4s8n2y6,
    .f9b3n7k2 .v3c6a9m2 {
      font-size: 11px;
      padding: 11px 13px;
      gap: 12px;
    }
    .n8p4c6r2 {
      border-left: 0;
      border-top: 1px solid #537346;
      padding: 27px 0 0;
    }
    .q4v8c2m6 {
      margin-top: 50px;
    }
    .x7b3p9n2 {
      padding-block: 35px;
      gap: 24px;
    }
    .x7b3p9n2 p {
      font-size: 11px;
    }
    .x7b3p9n2 nav > div {
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .x7b3p9n2 nav a {
      font-size: 10px;
    }
    .t3k8n2w6 {
      font-size: 8px;
      align-items: start;
    }
    .t3k8n2w6 > p:first-child {
      width: 100%;
    }
    .j2k7q9b4 {
      grid-template-columns: 1fr;
    }
    .j2k7q9b4 > img {
      min-height: 0;
      height: 200px;
    }
    .j2k7q9b4 > div {
      padding: 26px 23px;
    }
    .j2k7q9b4 h2 {
      font-size: 28px;
    }
  }
  @media (max-width: 359px) {
    .f8v2m6r4 {
      display: none;
    }
    .k7w2b9e4 {
      font-size: 45px;
    }
    .k2v7m4q8 button {
      padding-inline: 8px;
    }
    .l6v9h3w8 {
      font-size: 7px;
      letter-spacing: 0;
    }
    .g5r8p2k4 button[data-scene-go] {
      width: 19px;
    }
  }
}
@layer motion {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  [data-reveal="waiting"] {
    opacity: 0;
    transform: translateY(20px);
  }
  [data-reveal="shown"] {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.65s,
      transform 0.65s;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    [data-reveal] {
      opacity: 1;
      transform: none;
    }
  }
}