/* author/palette.css */
@layer foundation, frame, composition, controls, responsive;
@layer foundation {
  :root {
    --ink: #193c31;
    --muted: #66776d;
    --paper: #fafbf7;
    --line: #dfe6db;
    --forest: #102f28;
    --lime: #d1f481;
    --radius: 18px;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
  }
  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote {
    margin: 0;
  }
  h2,
  h3 {
    text-wrap: balance;
  }
  h2 {
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.4;
    letter-spacing: -0.06em;
  }
  h3 {
    font-size: 18px;
    line-height: 1.5;
  }
  p {
    line-height: 1.85;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button,
  input {
    font: inherit;
  }
  button {
    color: inherit;
    cursor: pointer;
  }
  button {
    border: 0;
    background: none;
    padding: 0;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  [hidden] {
    display: none !important;
  }
  a,
  button,
  summary,
  input {
    -webkit-tap-highlight-color: transparent;
  }
  :focus-visible {
    outline: 3px solid #39976a;
    outline-offset: 5px;
  }
  ::selection {
    color: #102f28;
    background: #d1f481;
  }
  section[id],
  article[id],
  nav[id] {
    scroll-margin-top: 112px;
  }
  .o9m2q5v8 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .w2v8h5k9 {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
  }
  .k4r7d9x2 {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.16em;
    color: #52725c;
  }
  .t8w3n6p2 {
    display: inline-block;
    font-size: 11px;
    line-height: 1.6;
    padding: 5px 10px;
    border-radius: 6px;
    background: #eaf0e2;
    color: #426044;
  }
}
@layer frame {
  .a8n4p2v9 {
    width: min(1240px, calc(100% - 80px));
    margin-inline: auto;
  }
  .u4n9k3v6 {
    padding-block: 76px;
  }
  .v7q2m8r4 {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
  }
  .v7q2m8r4 h2 {
    margin-top: 8px;
  }
  .f4k8r2v6 {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .b7k2x9q4 {
    position: sticky;
    z-index: 20;
    top: 0;
    background: rgb(250 251 247 / 96%);
    border-bottom: 1px solid #e3e9de;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .b7k2x9q4 > div {
    justify-content: space-between;
    min-height: 90px;
  }
  .c9w4m8r2 {
    font-size: 26px;
    letter-spacing: -0.04em;
    line-height: 1.2;
  }
  .c9w4m8r2 a {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .c9w4m8r2 small {
    display: block;
    font-size: 8px;
    letter-spacing: 0.13em;
    margin-top: 5px;
    font-weight: 500;
  }
  .d2h6j8p4 {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    background: #e5efda;
    border: 1px solid #d1dfc6;
  }
  .e5u9a2m7 {
    display: flex;
    gap: clamp(16px, 2.2vw, 30px);
    font-size: 13px;
    font-weight: 600;
  }
  .e5u9a2m7 a {
    padding-block: 14px;
    position: relative;
  }
  .e5u9a2m7 a::after {
    content: "";
    position: absolute;
    height: 2px;
    background: #429362;
    bottom: 5px;
    left: 0;
    width: 0;
    transition: width 0.2s;
  }
  .e5u9a2m7 a:hover::after {
    width: 100%;
  }
  .g8q3t5n2 {
    display: none;
    width: 42px;
    height: 42px;
    font-size: 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .w7q2v9m4 {
    padding: 16px 24px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-top: 1px solid var(--line);
  }
  .w7q2v9m4 a {
    padding: 11px 8px;
    font-size: 14px;
  }
  .p2v7m4k9 {
    position: fixed;
    top: 10px;
    left: 20px;
    transform: translateY(-170%);
    z-index: 99;
    padding: 12px 20px;
    background: var(--lime);
    border-radius: 10px;
  }
  .p2v7m4k9:focus {
    transform: none;
  }
  .h6p4w9c2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 49px;
    padding: 13px 21px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    transition:
      transform 0.2s,
      box-shadow 0.2s,
      background 0.2s;
    line-height: 1.6;
  }
  .h6p4w9c2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #183e2814;
  }
  .i3m8v2k7 {
    color: #1b3d2b;
    background: linear-gradient(115deg, #c6f078, #e0f7ac);
  }
  .j9v5q2h6 {
    border: 1px solid #b8c7b4;
    background: transparent;
  }
  .b7k2x9q4 .h6p4w9c2 {
    min-height: 42px;
    padding: 10px 16px;
  }
}
@layer composition {
  .l7x4n2p8 {
    color: #fffef1;
    background: radial-gradient(ellipse at 74% 36%, #295340 0, transparent 55%), var(--forest);
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .l7x4n2p8::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(#c9e5bb19 0.7px, transparent 0.7px);
    background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(100deg, transparent, #000);
    mask-image: linear-gradient(100deg, transparent, #000);
  }
  .m2q8w4v7 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 610px;
    align-items: center;
    gap: 38px;
    padding-block: 45px 38px;
  }
  .n6v3c9k5 {
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
  }
  .n6v3c9k5 > .k4r7d9x2 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d5efb8;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
  }
  .n6v3c9k5 > .k4r7d9x2 span {
    width: 7px;
    height: 7px;
    background: var(--lime);
    border-radius: 50%;
    box-shadow: 0 0 0 4px #cee98a13;
  }
  .n6v3c9k5 > .q6k9m3v2 {
    color: #a8c5af;
    font-size: 12px;
    margin-bottom: 12px;
    letter-spacing: 0.08em;
  }
  .o8p5n3w7 {
    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.34;
    letter-spacing: -0.075em;
    font-weight: 800;
  }
  .o8p5n3w7 span {
    color: var(--lime);
  }
  .n6v3c9k5 > .s5m9q4x2 {
    font-size: 17px;
    color: #e0e9da;
    margin-block: 24px 8px;
  }
  .l7x4n2p8 .w2v8h5k9 {
    color: #a4bfae;
    font-size: 12px;
  }
  .n6v3c9k5 > .f4k8r2v6 {
    margin-top: 28px;
  }
  .l7x4n2p8 .j9v5q2h6 {
    border-color: #698978;
  }
  .v9k7m2q4 {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #bdd0ba;
    font-size: 11px;
    margin-top: 26px;
  }
  .v9k7m2q4 > span:first-child {
    font-size: 21px;
    color: var(--lime);
  }
  .p4m7x9q2 {
    height: 510px;
    position: relative;
  }
  .p4m7x9q2 > .y3q8m5k2 {
    position: absolute;
    right: -9px;
    top: -13px;
    font-size: 83px;
    font-weight: 900;
    line-height: 0.97;
    letter-spacing: -0.07em;
    color: transparent;
    -webkit-text-stroke: 1px #7b9d6f50;
    z-index: -1;
  }
  .q3k8v5m2 {
    position: absolute;
    width: 63%;
    height: 430px;
    left: 2%;
    top: 14px;
    border: 6px solid #f0f4d4;
    border-radius: 8px;
    overflow: hidden;
    transform: rotate(-5deg);
    box-shadow: 0 25px 50px #001c1877;
  }
  .q3k8v5m2 > img {
    transition: transform 0.8s;
  }
  .q3k8v5m2:hover > img {
    transform: scale(1.04);
  }
  .q3k8v5m2 figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 80px 22px 22px;
    background: linear-gradient(transparent, #09271eea 70%);
    display: grid;
    gap: 8px;
  }
  .q3k8v5m2 .t8w3n6p2 {
    width: fit-content;
    background: var(--lime);
    color: #24462b;
    font-size: 10px;
  }
  .q3k8v5m2 strong {
    font-size: 29px;
    letter-spacing: -0.04em;
  }
  .q3k8v5m2 figcaption > span:last-child {
    font-size: 10px;
  }
  .r9v2h7k4 {
    position: absolute;
    width: 37%;
    height: 270px;
    right: 0;
    top: 210px;
    border: 5px solid #fbf8e8;
    border-radius: 7px;
    transform: rotate(7deg);
    background: #fbf8e8;
    color: #253f2c;
    overflow: hidden;
    box-shadow: 0 20px 45px #001c1855;
  }
  .r9v2h7k4 img {
    height: 198px;
  }
  .r9v2h7k4 figcaption {
    font-size: 9px;
    padding: 9px 10px;
    line-height: 1.6;
  }
  .r9v2h7k4 strong {
    display: block;
    font-size: 13px;
  }
  .r9v2h7k4 strong span {
    float: right;
  }
  .p4m7x9q2 > .q6k9m3v2 {
    position: absolute;
    top: 105px;
    right: 7px;
    background: var(--lime);
    color: #24422b;
    width: 115px;
    height: 99px;
    border-radius: 50%;
    transform: rotate(10deg);
    display: grid;
    align-content: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
  }
  .p4m7x9q2 > .q6k9m3v2 span {
    font-size: 30px;
    margin-bottom: 2px;
  }
  .p4m7x9q2 > .s5m9q4x2 {
    position: absolute;
    left: 5%;
    bottom: 0;
    font-size: 10px;
    color: #a7c5ab;
  }
  .l7x4n2p8 > .r2m8v5q7 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #84a78a30;
    padding-block: 19px;
    font-size: 11px;
    color: #b5ccaf;
  }
  .l7x4n2p8 > .r2m8v5q7 a {
    color: #e3f5c9;
  }
  .x9k3p6m2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .y5m7v2q8 {
    display: flex;
    gap: 13px;
    padding: 24px 16px;
    background: #f2f5ec;
    border: 1px solid #e7ecde;
    border-radius: 12px;
    transition:
      transform 0.25s,
      background 0.25s;
  }
  .y5m7v2q8:hover {
    transform: translateY(-5px);
    background: #eaf1e0;
  }
  .z4n9r2x6 {
    font-size: 26px;
    color: #4e7f3c;
    line-height: 1.3;
  }
  .y5m7v2q8 h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .y5m7v2q8 p {
    font-size: 11px;
    color: var(--muted);
  }
  .a7v9q3m5 {
    background: #eef3e6;
    border-block: 1px solid #e1e8d9;
  }
  .b4m8k2w6 {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 45px;
  }
  .c5q9v3p7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .c5q9v3p7 h2 {
    font-size: 20px;
    margin-block: 14px 20px;
  }
  .c5q9v3p7 h2 span {
    display: block;
    margin-top: 14px;
    font-size: 32px;
    line-height: 1.55;
  }
  .c5q9v3p7 > p:not([class]) {
    font-size: 13px;
  }
  .c5q9v3p7 > .w2v8h5k9 {
    margin-top: 14px;
    font-size: 10px;
  }
  .g6k2n9m4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
  }
  .g6k2n9m4 > span {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .g6k2n9m4 > .r2m8v5q7 {
    font-size: 10px;
  }
  .h9v5p2q7 {
    display: inline-grid;
    place-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #bed0b2;
    border-radius: 50%;
    font-size: 17px;
    background: #ffffff40;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .h9v5p2q7:hover {
    background: var(--lime);
  }
  .d8p2n7v4 {
    overflow: hidden;
    padding-top: 6px;
    margin-top: -6px;
  }
  .e2m6q9k4 {
    --cards: 3;
    display: flex;
    gap: 24px;
    transition: transform 0.65s cubic-bezier(0.25, 0.7, 0.2, 1);
  }
  .f9r3v7x5 {
    min-width: 0;
    flex: 0 0 calc((100% - (var(--cards) - 1) * 24px) / var(--cards));
  }
  .s9k4q7v2 {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    border-radius: 11px;
    background: #e1e8d7;
  }
  .f9r3v7x5 > .s9k4q7v2 {
    aspect-ratio: 3 / 4.2;
    box-shadow: 0 6px 16px #264c1812;
  }
  .s9k4q7v2 img {
    transition: transform 0.55s;
  }
  .s9k4q7v2:hover img {
    transform: scale(1.055);
  }
  .s9k4q7v2 .t8w3n6p2 {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #fcfff4ed;
    color: #305034;
  }
  .s9k4q7v2 .y3q8m5k2 {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background: #e7f6cb;
    color: #25452f;
  }
  .f9r3v7x5 > p {
    font-size: 11px;
    color: #6a7962;
  }
  .f9r3v7x5 > .w2v8h5k9 {
    font-size: 9px;
    margin-top: 15px;
    margin-bottom: 5px;
  }
  .f9r3v7x5 h3 {
    font-size: 17px;
    margin-bottom: 4px;
  }
  .f9r3v7x5 h3 button {
    text-align: left;
  }
  .i7p3m8v2 {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(270px, 1fr);
    gap: 44px;
    align-items: start;
  }
  #library > .v7q2m8r4 {
    gap: 12px;
    margin-bottom: 14px;
  }
  #library h2 {
    font-size: 29px;
  }
  .n9q4w6m2 {
    display: flex;
    align-items: center;
    margin-top: 22px;
    padding: 7px 8px 7px 17px;
    border: 1px solid #d8e2cf;
    background: #fff;
    border-radius: 9px;
    gap: 12px;
  }
  .n9q4w6m2 label {
    font-size: 11px;
    white-space: nowrap;
    padding-right: 12px;
    border-right: 1px solid var(--line);
  }
  .n9q4w6m2 input {
    min-width: 0;
    flex: 1;
    width: 100%;
    border: 0;
    padding: 8px 0;
    background: transparent;
    font-size: 12px;
  }
  .n9q4w6m2 button {
    padding: 10px 13px;
    font-size: 12px;
    background: #edf3e5;
    border-radius: 5px;
    white-space: nowrap;
  }
  .l4q7n9x2 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-block: 19px 10px;
  }
  .m8k3v5p2 {
    padding: 8px 18px;
    border: 1px solid #dfe6d7;
    border-radius: 6px;
    font-size: 11px;
    transition:
      background 0.2s,
      color 0.2s;
  }
  .m8k3v5p2[aria-pressed="true"] {
    background: #204b37;
    color: #edf8d6;
    border-color: #204b37;
  }
  #library > [data-search-status] {
    font-size: 10px;
    margin-bottom: 8px;
  }
  .j2w6q9n4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .k8m4v2p9 {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 15px;
    padding-block: 23px;
    border-bottom: 1px solid var(--line);
    align-items: start;
  }
  .k8m4v2p9 > .s9k4q7v2 {
    height: 122px;
    border-radius: 6px;
  }
  .k8m4v2p9 h3 {
    font-size: 15px;
    margin-block: 4px 6px;
  }
  .k8m4v2p9 p {
    font-size: 10px;
    color: #6f7c6c;
    line-height: 1.8;
  }
  .k8m4v2p9 p.w2v8h5k9 {
    font-size: 9px;
  }
  .k8m4v2p9 .r2m8v5q7 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    padding-top: 10px;
    color: #305d3c;
    font-weight: 700;
  }
  .o3v8p2k7 {
    background: #143a2d;
    color: #f5f7e8;
    border-radius: 15px;
    overflow: hidden;
  }
  .p7m4x9q2 {
    padding: 27px 26px 22px;
    background: radial-gradient(at top right, #406c4075, transparent);
  }
  .p7m4x9q2 .k4r7d9x2 {
    color: #b4d18f;
  }
  .p7m4x9q2 h2 {
    font-size: 27px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .p7m4x9q2 h2 span {
    color: var(--lime);
    font-weight: 400;
  }
  .p7m4x9q2 > p:not([class]) {
    font-size: 11px;
    margin-block: 9px 14px;
    color: #bfd0bb;
  }
  .p7m4x9q2 .t8w3n6p2 {
    font-size: 9px;
    background: #28513a;
    color: #d1e4bc;
  }
  .q8k2v6n4 {
    list-style: none;
    margin: 0;
    padding: 0 24px;
  }
  .t7v2q8m4 {
    display: grid;
    grid-template-columns: 20px 42px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 11px;
    padding-block: 17px;
    border-bottom: 1px solid #70926b33;
    transition: transform 0.2s;
  }
  .t7v2q8m4:hover {
    transform: translateX(3px);
  }
  .t7v2q8m4 > span:first-child {
    color: #b6d883;
    font-size: 17px;
    font-style: italic;
    font-family: Georgia, serif;
  }
  .t7v2q8m4 img {
    width: 42px;
    height: 59px;
    border-radius: 3px;
  }
  .t7v2q8m4 strong {
    font-size: 12px;
    font-weight: 600;
    display: block;
  }
  .t7v2q8m4 small {
    font-size: 9px;
    display: block;
    color: #afc2a6;
    margin-top: 7px;
  }
  .t7v2q8m4 > span:last-child {
    color: #a6ca83;
  }
  .o3v8p2k7 aside {
    padding: 25px 27px 28px;
    font-size: 11px;
    color: #c2d3b1;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
  }
  .o3v8p2k7 aside > span {
    font-size: 24px;
    color: var(--lime);
  }
  .o3v8p2k7 aside a {
    grid-column: 2;
    color: #e4efc5;
    font-size: 10px;
    margin-top: 5px;
  }
  .x8m3q6v9 {
    padding: 30px;
    border: 1px dashed #b5c6ab;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
  }
  .x8m3q6v9 p {
    margin-bottom: 15px;
  }
  .r4v9m3k2 {
    background: #e6eee1;
    position: relative;
    overflow: hidden;
  }
  .s8q5n2p7 {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: center;
  }
  .s8q5n2p7 > div:last-child > h2 {
    font-size: clamp(34px, 3.5vw, 46px);
    line-height: 1.5;
    margin-block: 14px 20px;
  }
  .s8q5n2p7 > div:last-child > p:not([class]) {
    font-size: 14px;
    line-height: 2;
    color: #526c56;
  }
  .s8q5n2p7 .w2v8h5k9 {
    font-size: 10px;
    max-width: 365px;
    margin-bottom: 25px;
  }
  .u2m4q9k7 {
    position: relative;
    padding: 36px 0;
  }
  .u2m4q9k7::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    max-width: 100%;
    background: #d0dfc3;
    border-radius: 50%;
    top: 60px;
    left: 0;
  }
  .u2m4q9k7 > .k4r7d9x2 {
    position: absolute;
    top: 4px;
    left: 0;
    font-size: 9px;
  }
  .u2m4q9k7 > .q6k9m3v2 {
    position: absolute;
    bottom: 38px;
    right: -5px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.12em;
    writing-mode: vertical-rl;
  }
  .t3m9v4q6 {
    position: relative;
    width: min(340px, 88%);
    margin-inline: auto;
    border: 8px solid #244333;
    border-radius: 24px;
    overflow: hidden;
    background: #244333;
    box-shadow:
      12px 18px 0 #24433312,
      0 25px 45px #33532a20;
    transform: rotate(-3deg);
  }
  .v5q9m2x8 {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 8px;
    padding: 10px 12px;
    color: #d3e6c8;
    align-items: center;
  }
  .v5q9m2x8 > span:first-child {
    color: #bad785;
  }
  .u7p2k8n4 {
    padding: 22px 20px 20px;
    background: #fbf9ed;
    color: #364f3b;
    transition:
      background 0.25s,
      color 0.25s;
    min-height: 440px;
  }
  .u7p2k8n4 > span {
    font-size: 8px;
    color: #687963;
    letter-spacing: 0.12em;
  }
  .u7p2k8n4 h3 {
    font-size: 23px;
    letter-spacing: 0.08em;
    margin-block: 9px 17px;
  }
  .u7p2k8n4 img {
    width: 100%;
    height: 116px;
    border-radius: 4px;
    margin-bottom: 15px;
  }
  .u7p2k8n4 p {
    font-size: 11px;
    line-height: 2.1;
    margin-top: 10px;
  }
  .u7p2k8n4 footer {
    font-size: 8px;
    margin-top: 19px;
    opacity: 0.65;
  }
  .u7p2k8n4[data-tone="dark"] {
    background: #142b24;
    color: #d7e2cb;
  }
  .u7p2k8n4[data-tone="dark"] > span {
    color: #abc29d;
  }
  .u7p2k8n4[data-size="large"] p {
    font-size: 14px;
  }
  .w8n3p6k4 {
    display: grid;
    gap: 12px;
    margin-block: 25px 18px;
  }
  .w8n3p6k4 > div {
    display: flex;
    gap: 8px;
  }
  .w8n3p6k4 button {
    min-width: 95px;
    padding: 10px 15px;
    font-size: 11px;
    border: 1px solid #b8cab0;
    border-radius: 6px;
  }
  .w8n3p6k4 button[aria-pressed="true"] {
    color: #e9f5d8;
    background: #28503a;
    border-color: #28503a;
  }
  .x2m7v9q4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 40px;
    counter-reset: steps;
  }
  .x2m7v9q4 li {
    position: relative;
    padding: 15px 5px 0;
    border-top: 1px solid #cedac4;
  }
  .x2m7v9q4 li > span {
    font-size: 42px;
    line-height: 1.2;
    font-family: Georgia, serif;
    color: #acc29b;
  }
  .x2m7v9q4 h3 {
    font-size: 17px;
    margin-block: 19px 10px;
  }
  .x2m7v9q4 p {
    font-size: 12px;
    color: #6a7b68;
    max-width: 300px;
  }
  .x2m7v9q4 a {
    display: inline-block;
    font-size: 11px;
    margin-top: 17px;
    font-weight: 700;
  }
  #voices {
    background: #f0f3eb;
    padding-top: 55px;
  }
  .z6p8m2n4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .a4k9v7q2 {
    padding: 23px 27px 25px;
    background: #fafbf7;
    border-radius: 9px;
    border: 1px solid #e3e9db;
  }
  .a4k9v7q2 > span {
    font-family: Georgia, serif;
    font-size: 49px;
    line-height: 1;
    display: block;
    color: #80a260;
    height: 38px;
  }
  .a4k9v7q2 blockquote {
    font-size: 12px;
    color: #5c705a;
    min-height: 74px;
  }
  .a4k9v7q2 figcaption {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
    font-size: 11px;
  }
  .a4k9v7q2 figcaption > span {
    width: 33px;
    height: 33px;
    background: #e4ecd9;
    border-radius: 50%;
    display: grid;
    place-content: center;
    font:
      italic 17px Georgia,
      serif;
  }
  .a4k9v7q2 small {
    font-size: 8px;
    display: block;
    margin-top: 5px;
    color: #84947d;
  }
  .c2v8q4n9 {
    display: grid;
    grid-template-columns: 0.8fr 1.3fr;
    gap: 80px;
  }
  .c2v8q4n9 h2 {
    font-size: 35px;
    margin-block: 14px 20px;
  }
  .c2v8q4n9 > div:first-child > a {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    margin-top: 25px;
  }
  .c2v8q4n9 details {
    border-bottom: 1px solid var(--line);
  }
  .c2v8q4n9 details:first-child {
    border-top: 1px solid var(--line);
  }
  .c2v8q4n9 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    gap: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .c2v8q4n9 summary::-webkit-details-marker {
    display: none;
  }
  .c2v8q4n9 summary > span:last-child {
    font-size: 20px;
    font-weight: 400;
    color: #51773f;
    transition: transform 0.2s;
  }
  .c2v8q4n9 details[open] summary > span:last-child {
    transform: rotate(45deg);
  }
  .c2v8q4n9 details > p {
    font-size: 12px;
    line-height: 1.9;
    color: #6a7b67;
    padding: 0 24px 22px 0;
  }
  .d6p3k9v2 {
    margin: 0 30px;
    padding: 62px 0;
    background: #123c2c;
    color: #f3f8e9;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
  }
  .d6p3k9v2::after {
    content: "↗";
    position: absolute;
    bottom: -100px;
    right: 30px;
    font-size: 460px;
    line-height: 1;
    color: #94c2550a;
    pointer-events: none;
  }
  .e8n4m7q2 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .d6p3k9v2 .k4r7d9x2 {
    color: #b4d391;
  }
  .d6p3k9v2 h2 {
    font-size: 21px;
    margin-block: 15px;
  }
  .d6p3k9v2 h2 span {
    display: block;
    color: #e1f6b7;
    font-size: 41px;
    margin-top: 8px;
  }
  .d6p3k9v2 p {
    font-size: 12px;
    color: #b6cdb0;
  }
  .d6p3k9v2 .f4k8r2v6 {
    margin-top: 24px;
  }
  .d6p3k9v2 .j9v5q2h6 {
    border-color: #749367;
  }
  .f2q9v6m4 {
    border: 1px solid #87ab6f55;
    background: #6c985a16;
    border-radius: 12px;
    padding: 28px;
  }
  .f2q9v6m4 > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .f2q9v6m4 > div:first-child > span:first-child {
    font-size: 24px;
    color: #d0ec9b;
    margin-right: 4px;
  }
  .f2q9v6m4 strong {
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  .f2q9v6m4 .t8w3n6p2 {
    font-size: 9px;
    color: #d1e4af;
    background: #36573b;
  }
  .f2q9v6m4 p {
    font-size: 11px;
    margin-block: 18px 22px;
  }
  .f2q9v6m4 > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #73936855;
    padding-top: 17px;
    font-size: 10px;
  }
  .f2q9v6m4 > div:last-child strong {
    font-size: 12px;
    font-weight: 500;
  }
  .g4v8n2q7 {
    padding-top: 64px;
  }
  .h2k7m9v4 {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 100px;
    padding-bottom: 45px;
  }
  .g4v8n2q7 h2 {
    font-size: 18px;
    margin-block: 10px 15px;
  }
  .i9v4q6p2 > p:last-child {
    color: #6a7b67;
    font-size: 11px;
    line-height: 2.1;
  }
  .j5m2k8v9 > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 14px;
  }
  .j5m2k8v9 a {
    font-size: 10px;
    color: #62745e;
    line-height: 1.7;
  }
  .j5m2k8v9 a:hover {
    color: #1b4a30;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .k7q3v9m2 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 23px;
    border-top: 1px solid var(--line);
    font-size: 9px;
    color: #7b8b75;
  }
  .k7q3v9m2 p {
    line-height: 1.7;
  }
  .k7q3v9m2 a {
    color: #305639;
  }
}
@layer controls {
  .l8m2v6q4 {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.65s,
      transform 0.65s;
  }
  .l8m2v6q4[data-visible] {
    opacity: 1;
    transform: none;
  }
  .m4q9n3v7 {
    max-width: min(520px, calc(100vw - 36px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid #b9c9af;
    border-radius: 18px;
    background: #fafbf5;
    color: var(--ink);
    box-shadow: 0 30px 100px #0c302e44;
  }
  .m4q9n3v7::backdrop {
    background: #0c281ec9;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  .n3k7v9p2 {
    padding: 43px 35px 33px;
  }
  .n3k7v9p2 > button {
    position: absolute;
    right: 17px;
    top: 15px;
  }
  .n3k7v9p2 h2 {
    margin-block: 20px 17px;
  }
  .n3k7v9p2 > p:not([class]) {
    font-size: 14px;
    line-height: 2;
  }
  .n3k7v9p2 aside {
    padding: 17px;
    background: #edf2e5;
    border-radius: 7px;
    font-size: 11px;
    color: #6c7b5f;
    line-height: 1.8;
    margin-block: 22px;
  }
  body[data-modal-open] {
    overflow: hidden;
  }
}
@layer responsive {
  @media (min-width: 1600px) {
    .m2q8w4v7 {
      min-height: 650px;
    }
  }
  @media (max-width: 1120px) {
    .a8n4p2v9 {
      width: calc(100% - 56px);
    }
    .b7k2x9q4 .h6p4w9c2 {
      display: none;
    }
    .m2q8w4v7 {
      min-height: 580px;
      gap: 20px;
    }
    .p4m7x9q2 {
      height: 470px;
    }
    .q3k8v5m2 {
      height: 390px;
      width: 66%;
    }
    .r9v2h7k4 {
      height: 236px;
      top: 205px;
      width: 38%;
    }
    .r9v2h7k4 img {
      height: 163px;
    }
    .p4m7x9q2 > .q6k9m3v2 {
      width: 90px;
      height: 85px;
      font-size: 8px;
      top: 100px;
      right: -10px;
    }
    .x9k3p6m2 {
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }
    .b4m8k2w6 {
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 30px;
    }
    .e2m6q9k4 {
      --cards: 2;
    }
    .c5q9v3p7 h2 span {
      font-size: 29px;
    }
    .i7p3m8v2 {
      gap: 26px;
      grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr);
    }
    .j2w6q9n4 {
      grid-template-columns: 1fr;
    }
    .k8m4v2p9 {
      padding-block: 18px;
      grid-template-columns: 73px 1fr;
    }
    .k8m4v2p9 > .s9k4q7v2 {
      height: 105px;
    }
    .k8m4v2p9 p {
      font-size: 11px;
    }
    .s8q5n2p7 {
      gap: 45px;
    }
    .h2k7m9v4 {
      gap: 50px;
    }
    .e8n4m7q2 {
      gap: 40px;
    }
    .d6p3k9v2 {
      margin-inline: 20px;
    }
    .d6p3k9v2 h2 span {
      font-size: 33px;
    }
  }
  @media (max-width: 760px) {
    html {
      scroll-padding-top: 92px;
    }
    section[id],
    article[id],
    nav[id] {
      scroll-margin-top: 92px;
    }
    .a8n4p2v9 {
      width: calc(100% - 40px);
    }
    .u4n9k3v6 {
      padding-block: 50px;
    }
    .b7k2x9q4 > div {
      min-height: 74px;
    }
    .c9w4m8r2 {
      font-size: 23px;
    }
    .d2h6j8p4 {
      width: 37px;
      height: 37px;
      border-radius: 11px;
    }
    .c9w4m8r2 small {
      font-size: 7px;
    }
    .e5u9a2m7 {
      display: none;
    }
    .g8q3t5n2 {
      display: block;
    }
    .m2q8w4v7 {
      grid-template-columns: 1fr;
      padding-block: 36px 24px;
      gap: 15px;
    }
    .o8p5n3w7 {
      font-size: clamp(39px, 7.3vw, 57px);
    }
    .n6v3c9k5 > .k4r7d9x2 {
      margin-bottom: 20px;
    }
    .n6v3c9k5 > .s5m9q4x2 {
      font-size: 15px;
      margin-top: 18px;
    }
    .n6v3c9k5 > .f4k8r2v6 {
      margin-top: 22px;
      gap: 10px;
    }
    .h6p4w9c2 {
      padding: 12px 15px;
      font-size: 12px;
      gap: 14px;
    }
    .v9k7m2q4 {
      margin-top: 16px;
    }
    .p4m7x9q2 {
      height: 450px;
      max-width: 460px;
      width: 100%;
      margin-inline: auto;
    }
    .q3k8v5m2 {
      height: 370px;
      width: 62%;
      left: 5%;
      top: 18px;
    }
    .r9v2h7k4 {
      width: 34%;
      height: 240px;
      right: 3%;
      top: 174px;
    }
    .r9v2h7k4 img {
      height: 169px;
    }
    .p4m7x9q2 > .q6k9m3v2 {
      top: 70px;
      right: 14px;
    }
    .p4m7x9q2 > .y3q8m5k2 {
      font-size: 78px;
      top: 12px;
      right: 7px;
    }
    .p4m7x9q2 > .s5m9q4x2 {
      bottom: 6px;
      left: 8%;
    }
    .l7x4n2p8 > .r2m8v5q7 {
      font-size: 9px;
      gap: 10px;
    }
    .v7q2m8r4 {
      align-items: start;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 23px;
    }
    .x9k3p6m2 {
      gap: 12px;
    }
    .y5m7v2q8 {
      padding: 19px 13px;
      gap: 9px;
      flex-direction: column;
    }
    .y5m7v2q8 h3 {
      font-size: 13px;
    }
    .y5m7v2q8 p {
      font-size: 11px;
    }
    .b4m8k2w6 {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .c5q9v3p7 h2 {
      margin-block: 10px 15px;
    }
    .c5q9v3p7 h2 span {
      margin-top: 9px;
    }
    .c5q9v3p7 h2 span br {
      display: none;
    }
    .c5q9v3p7 > p:not([class]) {
      max-width: 420px;
    }
    .c5q9v3p7 > .w2v8h5k9 {
      margin-top: 8px;
    }
    .g6k2n9m4 {
      margin-top: 19px;
    }
    .e2m6q9k4 {
      --cards: 2;
      gap: 24px;
    }
    .f9r3v7x5 > .s9k4q7v2 {
      aspect-ratio: 3 / 4.3;
    }
    .f9r3v7x5 h3 {
      font-size: 15px;
    }
    .f9r3v7x5 > p {
      font-size: 10px;
    }
    .i7p3m8v2 {
      grid-template-columns: 1fr;
      gap: 42px;
    }
    #library > .v7q2m8r4 {
      flex-direction: row;
      align-items: end;
    }
    #library h2 {
      font-size: 25px;
    }
    #library .t8w3n6p2 {
      white-space: nowrap;
      font-size: 9px;
    }
    .k8m4v2p9 {
      grid-template-columns: 83px 1fr;
      gap: 18px;
      padding-block: 20px;
    }
    .k8m4v2p9 > .s9k4q7v2 {
      height: 123px;
    }
    .k8m4v2p9 h3 {
      font-size: 17px;
    }
    .k8m4v2p9 p {
      font-size: 12px;
    }
    .k8m4v2p9 .r2m8v5q7 {
      font-size: 11px;
    }
    .n9q4w6m2 {
      padding-left: 12px;
      gap: 8px;
    }
    .n9q4w6m2 label {
      font-size: 10px;
      padding-right: 8px;
    }
    .n9q4w6m2 button {
      padding-inline: 10px;
    }
    .l4q7n9x2 {
      gap: 8px;
    }
    .m8k3v5p2 {
      padding: 8px 14px;
    }
    .q8k2v6n4 {
      padding-inline: 26px;
    }
    .t7v2q8m4 {
      grid-template-columns: 23px 46px 1fr 14px;
      gap: 17px;
    }
    .t7v2q8m4 img {
      width: 46px;
      height: 64px;
    }
    .t7v2q8m4 strong {
      font-size: 14px;
    }
    .o3v8p2k7 aside {
      padding-block: 23px;
    }
    .s8q5n2p7 {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .s8q5n2p7 > div:last-child {
      grid-row: 1;
    }
    .s8q5n2p7 > div:last-child > h2 {
      font-size: 34px;
    }
    .s8q5n2p7 > div:last-child > p:not([class]) {
      font-size: 13px;
    }
    .u2m4q9k7 {
      width: min(420px, 100%);
      margin-inline: auto;
    }
    .t3m9v4q6 {
      width: min(320px, 85%);
    }
    .u2m4q9k7 > .q6k9m3v2 {
      right: -6px;
      font-size: 9px;
    }
    .x2m7v9q4 {
      grid-template-columns: 1fr;
      gap: 27px;
    }
    .x2m7v9q4 li {
      padding-left: 60px;
    }
    .x2m7v9q4 li > span {
      position: absolute;
      left: 0;
      top: 24px;
      font-size: 35px;
    }
    .x2m7v9q4 h3 {
      margin-top: 8px;
    }
    .x2m7v9q4 p {
      max-width: none;
    }
    .x2m7v9q4 a {
      margin-top: 12px;
    }
    .z6p8m2n4 {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    .a4k9v7q2 {
      padding: 24px;
    }
    .a4k9v7q2 blockquote {
      min-height: auto;
      font-size: 13px;
    }
    .c2v8q4n9 {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .c2v8q4n9 h2 {
      font-size: 31px;
      margin-block: 12px;
    }
    .c2v8q4n9 summary {
      font-size: 13px;
      padding-block: 19px;
    }
    .d6p3k9v2 {
      margin-inline: 10px;
      padding-block: 40px;
      border-radius: 12px;
    }
    .d6p3k9v2 .a8n4p2v9 {
      width: calc(100% - 36px);
    }
    .e8n4m7q2 {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .d6p3k9v2 h2 span {
      font-size: 31px;
    }
    .d6p3k9v2 .f4k8r2v6 {
      gap: 10px;
    }
    .f2q9v6m4 {
      padding: 23px;
    }
    .g4v8n2q7 {
      padding-top: 45px;
    }
    .h2k7m9v4 {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-bottom: 30px;
    }
    .i9v4q6p2 > p:last-child {
      font-size: 12px;
    }
    .j5m2k8v9 > div {
      gap: 14px 12px;
    }
    .j5m2k8v9 a {
      font-size: 11px;
    }
    .k7q3v9m2 {
      flex-direction: column;
      gap: 9px;
      font-size: 10px;
    }
  }
  @media (max-width: 380px) {
    .a8n4p2v9 {
      width: calc(100% - 32px);
    }
    .o8p5n3w7 {
      font-size: 35px;
    }
    .n6v3c9k5 > .f4k8r2v6 {
      flex-wrap: wrap;
    }
    .p4m7x9q2 {
      height: 395px;
    }
    .q3k8v5m2 {
      height: 325px;
    }
    .r9v2h7k4 {
      height: 210px;
      top: 150px;
    }
    .r9v2h7k4 img {
      height: 145px;
    }
    .q3k8v5m2 figcaption {
      padding-inline: 12px;
    }
    .q3k8v5m2 strong {
      font-size: 23px;
    }
    .e2m6q9k4 {
      --cards: 1;
    }
    .f9r3v7x5 > .s9k4q7v2 {
      aspect-ratio: 4 / 4.5;
    }
    .n9q4w6m2 label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
    #library > .v7q2m8r4 {
      flex-direction: column;
      align-items: start;
    }
    .m8k3v5p2 {
      padding-inline: 12px;
    }
    .d6p3k9v2 .f4k8r2v6 {
      flex-wrap: wrap;
    }
    .f2q9v6m4 {
      padding: 18px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
    .l8m2v6q4 {
      opacity: 1;
      transform: none;
    }
  }
}