/* source/cinema.css */
@layer reset, base, composition, components, responsive;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote {
    margin: 0;
  }
  button,
  input {
    font: inherit;
  }
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  img {
    display: block;
    width: 100%;
    object-fit: cover;
  }
  [hidden] {
    display: none !important;
  }
}
@layer base {
  :root {
    color-scheme: light;
    --ink: #171a17;
    --muted: #62665d;
    --paper: #fffef9;
    --line: #dedfd6;
    --yellow: #ffe04a;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 98px;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    line-height: 1.75;
    font-size: 15px;
  }
  h1,
  h2,
  h3 {
    line-height: 1.35;
  }
  h2 {
    letter-spacing: -0.045em;
  }
  ::selection {
    color: #111;
    background: #ffdf4a;
  }
  :focus-visible {
    outline: 3px solid #a96105;
    outline-offset: 5px;
    border-radius: 4px;
  }
  button {
    color: inherit;
  }
  section,
  footer {
    scroll-margin-top: 18px;
  }
  button,
  a {
    touch-action: manipulation;
  }
  button:disabled {
    cursor: default;
  }
  [data-reveal] {
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }
  [data-reveal="pending"] {
    opacity: 0;
    transform: translateY(24px);
  }
}
@layer composition {
  .a7k2m9q4r {
    width: min(1240px, calc(100% - 88px));
    margin-inline: auto;
  }
  .i9d5r2v7q {
    padding-block: 90px;
  }
  .u8r2k5m9x {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 30px;
  }
  .u8r2k5m9x > p {
    color: var(--muted);
    font-size: 14px;
  }
  .e6v3n8d2p {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    margin-bottom: 15px;
  }
  .o4p7x2m8k {
    font-size: clamp(27px, 2.9vw, 39px);
    font-weight: 800;
  }
  .x2r9v5m7p {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .d9m3p7w2r {
    background: #f3f3eb;
  }
  .w7k2m8p4d {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
  }
  .s6n3v8r2k {
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    display: inline-block;
  }
  .s6n3v8r2k:hover {
    color: #876800;
  }
}
@layer components {
  .s9c4k7n2v {
    position: fixed;
    top: -90px;
    left: 20px;
    background: #ffe04a;
    padding: 12px 20px;
    z-index: 30;
    color: #111;
  }
  .s9c4k7n2v:focus {
    top: 10px;
  }
  .p3v8n6d2x {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #111211f5;
    color: #f5f5ed;
    border-bottom: 1px solid #ffffff14;
    backdrop-filter: blur(18px);
  }
  .p3v8n6d2x > .a7k2m9q4r {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 90px;
  }
  .b6r9h2w5k {
    font-size: 23px;
    font-weight: 850;
    flex-shrink: 0;
  }
  .b6r9h2w5k a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
  }
  .b6r9h2w5k small {
    display: block;
    font-size: 8px;
    letter-spacing: 0.16em;
    font-weight: 600;
    margin-top: 5px;
  }
  .y4t8c1p6m {
    display: grid;
    place-items: center;
    width: 40px;
    height: 43px;
    border-radius: 12px 12px 12px 3px;
    background: var(--yellow);
    color: #151715;
    font-size: 21px;
    padding-left: 3px;
    transform: rotate(-5deg);
  }
  .r8d3n7w2f {
    display: flex;
    gap: 30px;
    font-size: 13px;
    color: #d7d9cf;
  }
  .r8d3n7w2f a {
    position: relative;
    padding: 16px 0;
  }
  .r8d3n7w2f a:hover,
  .r8d3n7w2f a[aria-current] {
    color: var(--yellow);
  }
  .r8d3n7w2f a[aria-current]::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 16px;
    border-radius: 3px;
    background: var(--yellow);
    bottom: 5px;
    left: calc(50% - 8px);
  }
  .k8w4p2d6n,
  .h3c7r9m2v,
  .d4v8r2m6p {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 13px 25px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease;
  }
  .k8w4p2d6n {
    background: linear-gradient(120deg, #ffe966, #ffce32);
    color: #191b13;
    box-shadow: 0 5px 22px #e4b92713;
  }
  .k8w4p2d6n:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px #f8cd422b;
  }
  .h3c7r9m2v {
    color: #f5f5ed;
    border: 1px solid #ffffff3b;
  }
  .h3c7r9m2v:hover {
    background: #ffffff0a;
    transform: translateY(-3px);
  }
  .p3v8n6d2x .k8w4p2d6n {
    min-height: 40px;
    padding: 9px 18px;
    font-size: 12px;
  }
  .z5m2v9q6s {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: inherit;
    border: 1px solid #ffffff40;
    background: transparent;
    border-radius: 50%;
    font-size: 21px;
  }
  .z5m2v9q6s:hover {
    background: #ffffff18;
  }
  .l4w8r6h2p {
    position: absolute;
    top: 90px;
    right: max(30px, calc((100vw - 1240px) / 2));
    width: min(560px, calc(100% - 40px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 22px;
    gap: 6px;
    border: 1px solid #ffffff29;
    background: #20231f;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 40px #0005;
  }
  .l4w8r6h2p a {
    padding: 11px 12px;
    border-radius: 5px;
    font-size: 14px;
  }
  .l4w8r6h2p a:hover {
    background: #ffe04a;
    color: #111;
  }
  .q6h3x8p2d {
    background: #111211;
    color: #f6f5ec;
    overflow: clip;
  }
  .t8m4r2w9k {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    min-height: 625px;
    align-items: center;
    gap: 24px;
    padding-block: 56px 45px;
  }
  .d2v7p4n9c {
    font-size: 12px;
    letter-spacing: 0.12em;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #dfdfd2;
    margin-bottom: 26px;
  }
  .d2v7p4n9c > span {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 15px #ffe04a66;
  }
  .m7q3x9h4b {
    font-size: clamp(42px, 4.5vw, 65px);
    letter-spacing: -0.055em;
    line-height: 1.3;
    font-weight: 900;
    white-space: nowrap;
  }
  .m7q3x9h4b > span {
    color: var(--yellow);
  }
  .f4n8d2k6r {
    color: #bfc1b7;
    font-size: 16px;
    margin: 24px 0 30px;
    line-height: 1.9;
  }
  .w2q8p5n9d {
    color: #b1b6a8;
    font-size: 11px;
    margin-top: 20px;
    line-height: 1.8;
  }
  .r4m8d2p6k {
    display: flex;
    gap: 18px;
    font-size: 11px;
    color: #b6b9ab;
    margin-top: 40px;
  }
  .r4m8d2p6k > span + span {
    border-left: 1px solid #ffffff30;
    padding-left: 18px;
  }
  .v5p8x2n4q {
    position: relative;
    min-width: 0;
    height: 510px;
  }
  .v5p8x2n4q::before {
    content: "";
    position: absolute;
    inset: 12% -10% 8% 10%;
    background: radial-gradient(ellipse, #dac03d20, transparent 65%);
  }
  .n9k3d7w5m {
    height: 440px;
    position: relative;
    margin: 12px 70px 0 30px;
    perspective: 1400px;
  }
  .c6m2r8v4p {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid #ffffff3d;
    border-radius: 15px;
    transition:
      transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 0.75s;
    box-shadow: 0 25px 60px #0008;
    transform: translate(18%, 6%) rotate(9deg) scale(0.88);
    opacity: 0.5;
  }
  .c6m2r8v4p[data-position="2"] {
    transform: translate(-15%, 2%) rotate(-10deg) scale(0.9);
    opacity: 0.45;
    z-index: 1;
  }
  .c6m2r8v4p[data-position="1"] {
    z-index: 2;
  }
  .c6m2r8v4p[data-position="0"],
  .c6m2r8v4p:first-child:not([data-position]) {
    transform: rotate(-3deg);
    opacity: 1;
    z-index: 3;
  }
  .c6m2r8v4p img {
    height: 100%;
    object-position: center;
  }
  .c6m2r8v4p::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #10160ff2, transparent 70%);
  }
  .c6m2r8v4p figcaption {
    position: absolute;
    z-index: 1;
    bottom: 30px;
    left: 30px;
    right: 20px;
  }
  .c6m2r8v4p figcaption > span {
    font-size: 10px;
    border: 1px solid #ffffff70;
    border-radius: 4px;
    padding: 4px 8px;
  }
  .c6m2r8v4p strong {
    display: block;
    font-size: 32px;
    font-weight: 900;
    margin: 14px 0 3px;
  }
  .c6m2r8v4p p {
    font-size: 12px;
    color: #e3e5dc;
  }
  .j4x7m2k8r {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 44px;
    right: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .j4x7m2k8r > span {
    font-size: 11px;
    color: #9fa495;
    letter-spacing: 0.1em;
  }
  .j4x7m2k8r b {
    font-size: 17px;
    color: var(--yellow);
    margin-right: 7px;
  }
  .j4x7m2k8r > div {
    display: flex;
    gap: 8px;
  }
  .j4x7m2k8r button {
    border: 1px solid #ffffff36;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    background: #1a1d19;
    color: #eee;
    line-height: 1;
  }
  .j4x7m2k8r button:hover {
    color: #111;
    background: var(--yellow);
  }
  .p8d4m7r2x {
    position: absolute;
    right: -4px;
    top: 35px;
    font-size: 10px;
    letter-spacing: 0.16em;
    line-height: 1.5;
    writing-mode: vertical-rl;
    color: #a4a998;
    z-index: 4;
  }
  .p8d4m7r2x em {
    color: var(--yellow);
    font-style: normal;
  }
  .h7n2c9v4m {
    border-top: 1px solid #ffffff20;
    padding-block: 21px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #bfc2b5;
    gap: 15px;
  }
  .h7n2c9v4m a {
    display: flex;
    gap: 22px;
  }
  .h7n2c9v4m span {
    color: var(--yellow);
  }
  .a4v8n2p6r {
    padding-block: 64px;
    background: #f9e365;
  }
  .a4v8n2p6r .o4p7x2m8k {
    font-size: 28px;
  }
  .a4v8n2p6r .e6v3n8d2p {
    margin-bottom: 10px;
  }
  .a4v8n2p6r .u8r2k5m9x > p {
    color: #4b4b2d;
  }
  .n4q8v2d6m {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  .n4q8v2d6m article {
    padding-left: 22px;
    border-left: 1px solid #3e411c3d;
  }
  .n4q8v2d6m article > span {
    font-size: 12px;
    color: #655a24;
  }
  .n4q8v2d6m h3 {
    font-size: 16px;
    margin: 11px 0 10px;
  }
  .n4q8v2d6m p {
    font-size: 12px;
    color: #4d4c32;
    line-height: 1.9;
  }
  #picks > .w7k2m8p4d {
    margin-top: -16px;
    margin-bottom: 26px;
  }
  .k4r8n2v6x {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 22px;
  }
  .v6p2r8m4n {
    min-width: 0;
    position: relative;
  }
  .v6p2r8m4n button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
  }
  .v6p2r8m4n button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: 2;
  }
  .h6m2v8r4p {
    position: relative;
    aspect-ratio: 1.4;
    border-radius: 12px;
    overflow: hidden;
    background: #d9d7ca;
  }
  .h6m2v8r4p img {
    height: 100%;
    transition: transform 0.55s ease;
  }
  .h6m2v8r4p::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(transparent, #1118);
  }
  .h6m2v8r4p > span {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 14px;
    font-size: 10px;
    padding: 4px 9px;
    border-radius: 5px;
    background: #ffde4a;
    font-weight: 700;
  }
  .h6m2v8r4p > b {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 1;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #fff9;
    color: #fff;
    font-size: 18px;
    transition: background 0.2s;
  }
  .v6p2r8m4n:hover img {
    transform: scale(1.06);
  }
  .v6p2r8m4n:hover .h6m2v8r4p > b {
    background: #ffde4a;
    color: #111;
    border-color: #ffde4a;
  }
  .v6p2r8m4n h3 {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 19px;
  }
  .v6p2r8m4n p {
    font-size: 12px;
    color: var(--muted);
  }
  .v8m4r2q6n {
    display: flex;
    gap: 9px;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }
  .v8m4r2q6n button {
    border: 1px solid #cfd2c6;
    background: transparent;
    padding: 9px 19px;
    border-radius: 30px;
    font-size: 12px;
  }
  .v8m4r2q6n button[aria-pressed="true"] {
    background: #1c2019;
    color: #ffdf4a;
    border-color: #1c2019;
  }
  .v8m4r2q6n button:hover {
    border-color: #1c2019;
  }
  .q3v7m2r8d {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 24px;
  }
  .q3v7m2r8d .h6m2v8r4p {
    aspect-ratio: 0.7;
    border-radius: 9px;
  }
  .q3v7m2r8d .h6m2v8r4p > span {
    top: 10px;
    left: 10px;
    background: #1a211dcc;
    color: #fff4cb;
  }
  .q3v7m2r8d .h6m2v8r4p > b {
    height: 29px;
    width: 29px;
    right: 10px;
    bottom: 10px;
    font-size: 15px;
  }
  .q3v7m2r8d h3 {
    font-size: 14px;
    margin-top: 13px;
  }
  .q3v7m2r8d p {
    font-size: 10px;
  }
  .x7p3n9v2m {
    display: grid;
    grid-template-columns: 0.85fr 1.6fr;
    border: 1px solid #d8d9cd;
    border-radius: 15px;
    overflow: hidden;
  }
  .r2n8m5q9d {
    padding: 42px;
    background: #f7df69;
  }
  .r2n8m5q9d h2 {
    font-size: 37px;
    line-height: 1.4;
    margin-bottom: 24px;
  }
  .r2n8m5q9d h2 > span {
    display: inline-block;
    padding-left: 20px;
  }
  .r2n8m5q9d > p:not(.e6v3n8d2p) {
    font-size: 12px;
    max-width: 290px;
    margin-bottom: 17px;
  }
  .c9v3m6k2r {
    display: inline-block;
    border: 1px solid #676a4f77;
    border-radius: 4px;
    padding: 5px 9px;
    font-size: 10px;
  }
  .m2q8d4v7n {
    list-style: none;
    padding: 24px 35px;
    margin: 0;
    background: #1c201a;
    color: #f5f3e8;
  }
  .m2q8d4v7n li + li {
    border-top: 1px solid #ffffff20;
  }
  .m2q8d4v7n button {
    width: 100%;
    background: none;
    border: 0;
    display: grid;
    grid-template-columns: 45px 75px 1fr 20px;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    text-align: left;
  }
  .m2q8d4v7n b {
    font-size: 31px;
    font-style: italic;
    color: #ffe04a;
    font-weight: 600;
  }
  .m2q8d4v7n img {
    height: 82px;
    border-radius: 5px;
  }
  .m2q8d4v7n strong {
    display: block;
    font-size: 16px;
    margin-bottom: 7px;
  }
  .m2q8d4v7n small {
    color: #b4bba8;
    font-size: 11px;
  }
  .m2q8d4v7n button > span:last-child {
    color: #ffe04a;
    font-size: 20px;
    transition: transform 0.2s;
  }
  .m2q8d4v7n button:hover > span:last-child {
    transform: translate(3px, -3px);
  }
  .v4d8m2p7q {
    background: #191c17;
    color: #f7f6ed;
    overflow: hidden;
  }
  .p2m6n8r4v {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 110px;
    padding-block: 84px;
  }
  .t7v3k9m2r {
    background: #f5f3e8;
    color: #1a2018;
    border: 9px solid #33392c;
    border-radius: 43px;
    padding: 15px 13px 12px;
    width: 295px;
    max-width: 100%;
    margin-inline: auto;
    transform: rotate(-5deg);
    box-shadow:
      22px 25px 0 #42482b45,
      0 0 120px #a2a84715;
  }
  .n6r2p8v4d {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 800;
    margin: 0 9px 18px;
  }
  .k9m4v2r8p {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    align-items: center;
    margin: 0 4px 12px;
  }
  .k9m4v2r8p > span {
    font-size: 8px;
    color: #5e6457;
  }
  .w3n7q2m8v {
    height: 267px;
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    background: #9b967a;
  }
  .w3n7q2m8v::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, #121b10ee);
  }
  .w3n7q2m8v img {
    height: 100%;
  }
  .w3n7q2m8v > span {
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 13px;
    font-size: 9px;
    background: #ffdf4a;
    padding: 3px 8px;
    border-radius: 4px;
  }
  .w3n7q2m8v > strong {
    position: absolute;
    z-index: 1;
    bottom: 15px;
    left: 13px;
    font-size: 20px;
    color: white;
  }
  .f8p2m6v4r {
    font-size: 9px;
    margin-top: 12px;
  }
  .f8p2m6v4r button {
    display: block;
    width: 100%;
    background: #ffdc40;
    border: 0;
    border-radius: 7px;
    padding: 9px;
    margin-top: 9px;
    font-size: 11px;
    font-weight: 800;
  }
  .b8q2v7m4n {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #d6d8c9;
    margin-top: 15px;
    padding-top: 11px;
    font-size: 9px;
  }
  .g4r8n2m6p h2 {
    font-size: 39px;
    line-height: 1.5;
    margin-bottom: 23px;
  }
  .g4r8n2m6p h2 > span {
    color: #ffe04a;
  }
  .g4r8n2m6p > p:not(.e6v3n8d2p, .w2q8p5n9d) {
    color: #b3baaa;
    font-size: 13px;
    max-width: 410px;
  }
  .j8n4p2v6r {
    margin-top: 28px;
  }
  .j8n4p2v6r button {
    display: flex;
    align-items: center;
    text-align: left;
    width: 100%;
    gap: 18px;
    padding: 17px 4px;
    border: 0;
    border-bottom: 1px solid #ffffff25;
    color: #e8eade;
    background: transparent;
  }
  .j8n4p2v6r button > b {
    font-size: 11px;
    color: #8e9883;
  }
  .j8n4p2v6r strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
  }
  .j8n4p2v6r small {
    font-size: 10px;
    color: #a9b29f;
  }
  .j8n4p2v6r button > span:last-child {
    margin-left: auto;
    color: #8c9580;
    font-size: 20px;
  }
  .j8n4p2v6r button[aria-pressed="true"] > b,
  .j8n4p2v6r button[aria-pressed="true"] > span:last-child,
  .j8n4p2v6r button[aria-pressed="true"] strong {
    color: #ffe04a;
  }
  .e3p7v2m9r {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
  }
  .e3p7v2m9r li {
    border-top: 1px solid #b8bcad;
    padding-top: 23px;
  }
  .e3p7v2m9r li > span {
    font-size: 38px;
    font-weight: 800;
    color: #b5bba8;
    letter-spacing: -0.05em;
  }
  .e3p7v2m9r h3 {
    font-size: 19px;
    margin: 14px 0 12px;
  }
  .e3p7v2m9r p {
    font-size: 12px;
    color: var(--muted);
    max-width: 310px;
    margin-bottom: 20px;
  }
  .e3p7v2m9r a,
  .e3p7v2m9r button {
    background: transparent;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid #767c69;
    font-size: 12px;
    font-weight: 700;
  }
  .z2m8v4r6p {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
  }
  .p6v2r9m4k {
    margin-top: 28px;
  }
  .p6v2r9m4k figure {
    padding-block: 21px;
    border-top: 1px solid #d6dacb;
  }
  .p6v2r9m4k blockquote {
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 15px;
  }
  .p6v2r9m4k figcaption {
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 11px;
  }
  .p6v2r9m4k figcaption > span {
    height: 34px;
    width: 34px;
    display: grid;
    place-items: center;
    background: #e2e4d7;
    border-radius: 50%;
    font-size: 11px;
  }
  .p6v2r9m4k small {
    display: block;
    color: #6b7261;
    font-size: 9px;
  }
  #voices > .w7k2m8p4d {
    margin-top: 13px;
  }
  .n2m8p4v6r {
    margin-top: 30px;
  }
  .n2m8p4v6r details {
    border-top: 1px solid #cbd1be;
    padding: 20px 0;
  }
  .n2m8p4v6r details:last-child {
    border-bottom: 1px solid #cbd1be;
  }
  .n2m8p4v6r summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    list-style: none;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
  }
  .n2m8p4v6r summary::-webkit-details-marker {
    display: none;
  }
  .n2m8p4v6r summary > span {
    font-size: 22px;
    font-weight: 400;
    transition: transform 0.2s;
  }
  .n2m8p4v6r details[open] summary > span {
    transform: rotate(45deg);
  }
  .n2m8p4v6r details p {
    font-size: 12px;
    color: #5d6554;
    padding-top: 14px;
  }
  .q8m2r6v4n {
    background: linear-gradient(110deg, #ffeb80, #ffd943);
    border-radius: 17px;
    padding: 48px 52px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
  }
  .q8m2r6v4n h2 {
    font-size: 33px;
    margin-bottom: 16px;
  }
  .q8m2r6v4n > div > p:not(.e6v3n8d2p) {
    font-size: 14px;
  }
  .q8m2r6v4n .x2r9v5m7p {
    margin-top: 24px;
    gap: 22px;
  }
  .d4v8r2m6p {
    color: #fff1b7;
    background: #20251a;
  }
  .d4v8r2m6p:hover {
    transform: translateY(-3px);
  }
  .h2p8m4v6r {
    padding-left: 35px;
    border-left: 1px solid #323e2c4d;
  }
  .h2p8m4v6r h3 {
    font-size: 22px;
    margin: 16px 0 12px;
  }
  .h2p8m4v6r p {
    font-size: 12px;
    color: #4a4d30;
  }
  .h2p8m4v6r p:last-child {
    font-size: 10px;
    margin-top: 16px;
  }
  .w8m2v6r4p {
    background: #151812;
    color: #f1f2e6;
    padding-top: 60px;
  }
  .m8p4r2v6n {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 100px;
    padding-bottom: 45px;
  }
  .m8p4r2v6n h2 {
    font-size: 13px;
    letter-spacing: 0;
    margin: 28px 0 15px;
  }
  .m8p4r2v6n > div > p:last-child {
    font-size: 11px;
    line-height: 2;
    color: #aab39d;
  }
  .m8p4r2v6n nav h2 {
    margin-top: 8px;
    margin-bottom: 22px;
  }
  .m8p4r2v6n nav > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 25px;
    font-size: 11px;
    color: #b7c0a9;
  }
  .m8p4r2v6n nav a:hover {
    color: #ffe04a;
  }
  .r6m2p8v4n {
    border-top: 1px solid #ffffff22;
    padding-block: 24px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #a4ae96;
  }
  .r6m2p8v4n a {
    color: #e0e5d5;
    white-space: nowrap;
  }
  .c2r8m4v6p {
    display: none;
  }
  .j2r8m4v6p {
    width: min(600px, calc(100% - 40px));
    border: 1px solid #626e4a;
    border-radius: 16px;
    padding: 0;
    background: #fffef5;
    color: #20251a;
    max-height: 85dvh;
    box-shadow: 0 24px 100px #0006;
  }
  .j2r8m4v6p::backdrop {
    background: #0a100cc9;
    backdrop-filter: blur(8px);
  }
  .j2r8m4v6p > div {
    padding: 42px;
    position: relative;
  }
  .j2r8m4v6p .z5m2v9q6s {
    position: absolute;
    right: 14px;
    top: 14px;
    border-color: #76805d66;
  }
  .j2r8m4v6p .z5m2v9q6s:hover {
    background: #e5e8d7;
  }
  .j2r8m4v6p h2 {
    font-size: 30px;
    margin: 18px 0;
  }
  .j2r8m4v6p h3 {
    font-size: 15px;
    margin: 24px 0 10px;
  }
  .j2r8m4v6p p {
    font-size: 13px;
  }
  .j2r8m4v6p .w7k2m8p4d {
    margin: 25px 0;
    font-size: 11px;
  }
  .j2r8m4v6p .e6v3n8d2p {
    font-size: 10px;
    padding-right: 20px;
  }
  body:has(dialog[open]) {
    overflow: hidden;
  }
}
@layer responsive {
  @media (min-width: 1600px) {
    .t8m4r2w9k {
      min-height: 680px;
    }
  }
  @media (max-width: 1100px) {
    .a7k2m9q4r {
      width: calc(100% - 56px);
    }
    .r8d3n7w2f {
      gap: 18px;
    }
    .t8m4r2w9k {
      grid-template-columns: 1fr 1fr;
      min-height: 580px;
    }
    .m7q3x9h4b {
      font-size: 46px;
    }
    .n9k3d7w5m {
      margin-inline: 15px 35px;
    }
    .v5p8x2n4q {
      height: 450px;
    }
    .n9k3d7w5m {
      height: 380px;
    }
    .c6m2r8v4p strong {
      font-size: 25px;
    }
    .j4x7m2k8r {
      left: 20px;
      right: 25px;
    }
    .p8d4m7r2x {
      right: -8px;
    }
    .x2r9v5m7p {
      gap: 10px;
    }
    .t8m4r2w9k .k8w4p2d6n,
    .t8m4r2w9k .h3c7r9m2v {
      padding-inline: 15px;
      font-size: 12px;
    }
    .q3v7m2r8d {
      gap: 13px;
    }
    .p2m6n8r4v {
      gap: 45px;
    }
    .g4r8n2m6p h2 {
      font-size: 32px;
    }
    .z2m8v4r6p {
      gap: 55px;
    }
    .q8m2r6v4n {
      gap: 35px;
      padding: 40px 35px;
    }
    .q8m2r6v4n h2 {
      font-size: 28px;
    }
  }
  @media (max-width: 800px) {
    .r8d3n7w2f {
      display: none;
    }
    .p3v8n6d2x > .a7k2m9q4r {
      height: 75px;
    }
    .l4w8r6h2p {
      top: 75px;
    }
    .t8m4r2w9k {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding-block: 45px;
    }
    .m7q3x9h4b {
      font-size: 38px;
    }
    .f4n8d2k6r {
      font-size: 13px;
    }
    .v5p8x2n4q {
      height: 410px;
    }
    .n9k3d7w5m {
      height: 340px;
      margin-inline: 20px 25px;
    }
    .c6m2r8v4p figcaption {
      left: 17px;
      bottom: 24px;
    }
    .c6m2r8v4p strong {
      font-size: 21px;
    }
    .c6m2r8v4p p {
      font-size: 10px;
    }
    .p8d4m7r2x {
      display: none;
    }
    .d2v7p4n9c {
      font-size: 10px;
    }
    .r4m8d2p6k {
      margin-top: 25px;
      gap: 9px;
    }
    .r4m8d2p6k > span + span {
      padding-left: 9px;
    }
    .n4q8v2d6m {
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    .k4r8n2v6x {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 15px;
    }
    .v6p2r8m4n h3 {
      font-size: 15px;
    }
    .q3v7m2r8d {
      grid-template-columns: repeat(3, 1fr);
      gap: 27px 20px;
    }
    .x7p3n9v2m {
      grid-template-columns: 0.8fr 1.2fr;
    }
    .r2n8m5q9d {
      padding: 30px 24px;
    }
    .r2n8m5q9d h2 {
      font-size: 30px;
    }
    .m2q8d4v7n {
      padding: 15px 23px;
    }
    .m2q8d4v7n button {
      grid-template-columns: 26px 50px 1fr 15px;
      gap: 12px;
    }
    .m2q8d4v7n b {
      font-size: 24px;
    }
    .m2q8d4v7n img {
      height: 70px;
    }
    .m2q8d4v7n strong {
      font-size: 13px;
    }
    .p2m6n8r4v {
      grid-template-columns: 0.9fr 1fr;
      gap: 35px;
    }
    .t7v3k9m2r {
      width: 255px;
    }
    .w3n7q2m8v {
      height: 230px;
    }
    .w3n7q2m8v > strong {
      font-size: 17px;
    }
    .g4r8n2m6p h2 {
      font-size: 26px;
    }
    .e3p7v2m9r {
      gap: 25px;
    }
    .e3p7v2m9r h3 {
      font-size: 16px;
    }
    .z2m8v4r6p {
      gap: 35px;
    }
    .q8m2r6v4n {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .h2p8m4v6r {
      border-left: 0;
      border-top: 1px solid #323e2c4d;
      padding: 25px 0 0;
    }
    .m8p4r2v6n {
      gap: 45px;
    }
    .r6m2p8v4n {
      flex-wrap: wrap;
    }
  }
  @media (max-width: 600px) {
    html {
      scroll-padding-top: 82px;
    }
    body {
      padding-bottom: 64px;
    }
    .a7k2m9q4r {
      width: calc(100% - 40px);
    }
    .p3v8n6d2x > .a7k2m9q4r {
      height: 70px;
      gap: 10px;
    }
    .b6r9h2w5k {
      font-size: 19px;
    }
    .b6r9h2w5k a {
      gap: 8px;
    }
    .b6r9h2w5k small {
      font-size: 6px;
    }
    .y4t8c1p6m {
      width: 33px;
      height: 36px;
      font-size: 18px;
      border-radius: 10px 10px 10px 2px;
    }
    .p3v8n6d2x .k8w4p2d6n {
      font-size: 10px;
      padding: 8px 11px;
      min-height: 36px;
      gap: 7px;
    }
    .p3v8n6d2x .x2r9v5m7p {
      gap: 9px;
      flex-wrap: nowrap;
    }
    .z5m2v9q6s {
      width: 36px;
      height: 36px;
      font-size: 19px;
    }
    .l4w8r6h2p {
      top: 70px;
      right: 20px;
      padding: 14px;
      max-height: calc(100dvh - 145px);
      overflow-y: auto;
    }
    .l4w8r6h2p a {
      font-size: 12px;
      padding: 10px 8px;
    }
    .t8m4r2w9k {
      grid-template-columns: 1fr;
      padding-top: 40px;
      padding-bottom: 15px;
      gap: 25px;
    }
    .d2v7p4n9c {
      margin-bottom: 19px;
    }
    .m7q3x9h4b {
      font-size: clamp(36px, 10vw, 53px);
      line-height: 1.35;
    }
    .f4n8d2k6r {
      margin-block: 18px 23px;
      font-size: 13px;
    }
    .t8m4r2w9k .k8w4p2d6n,
    .t8m4r2w9k .h3c7r9m2v {
      min-height: 47px;
      font-size: 12px;
      padding-inline: 17px;
    }
    .w2q8p5n9d {
      margin-top: 15px;
      font-size: 9px;
    }
    .r4m8d2p6k {
      margin-top: 22px;
      font-size: 10px;
    }
    .v5p8x2n4q {
      height: 420px;
      width: min(370px, 100%);
      margin-inline: auto;
    }
    .n9k3d7w5m {
      margin-inline: 28px;
      height: 340px;
    }
    .c6m2r8v4p figcaption {
      left: 24px;
    }
    .c6m2r8v4p strong {
      font-size: 26px;
    }
    .j4x7m2k8r {
      bottom: 8px;
      left: 28px;
      right: 28px;
    }
    .h7n2c9v4m {
      flex-direction: column;
      gap: 8px;
      padding-block: 17px 22px;
      font-size: 10px;
    }
    .h7n2c9v4m a {
      justify-content: space-between;
      gap: 10px;
    }
    .a4v8n2p6r {
      padding-block: 40px;
    }
    .u8r2k5m9x {
      display: block;
      margin-bottom: 25px;
    }
    .u8r2k5m9x > p {
      font-size: 11px;
      margin-top: 12px;
    }
    .u8r2k5m9x .s6n3v8r2k {
      margin-top: 17px;
      font-size: 11px;
    }
    .a4v8n2p6r .o4p7x2m8k {
      font-size: 23px;
    }
    .n4q8v2d6m {
      gap: 24px 16px;
    }
    .n4q8v2d6m article {
      padding-left: 13px;
    }
    .n4q8v2d6m h3 {
      font-size: 13px;
    }
    .n4q8v2d6m p {
      font-size: 11px;
    }
    .i9d5r2v7q {
      padding-block: 52px;
    }
    .e6v3n8d2p {
      font-size: 9px;
      margin-bottom: 11px;
    }
    .o4p7x2m8k {
      font-size: 27px;
    }
    .w7k2m8p4d {
      font-size: 10px;
    }
    .k4r8n2v6x {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 13px;
      gap: 16px;
    }
    .k4r8n2v6x > article {
      flex: 0 0 83%;
      scroll-snap-align: start;
    }
    .k4r8n2v6x h3 {
      font-size: 18px;
    }
    .k4r8n2v6x .h6m2v8r4p {
      aspect-ratio: 1.4;
    }
    .q3v7m2r8d {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 16px;
    }
    .q3v7m2r8d h3 {
      font-size: 14px;
    }
    .v8m4r2q6n {
      gap: 7px;
      margin-bottom: 25px;
    }
    .v8m4r2q6n button {
      padding: 9px 13px;
      font-size: 11px;
    }
    .x7p3n9v2m {
      grid-template-columns: 1fr;
    }
    .r2n8m5q9d {
      padding: 29px 25px;
    }
    .r2n8m5q9d h2 {
      font-size: 31px;
      margin-bottom: 18px;
    }
    .r2n8m5q9d h2 br {
      display: none;
    }
    .r2n8m5q9d h2 > span {
      padding-left: 8px;
    }
    .r2n8m5q9d > p:not(.e6v3n8d2p) {
      max-width: none;
      margin-bottom: 12px;
      font-size: 11px;
    }
    .m2q8d4v7n {
      padding: 10px 24px;
    }
    .m2q8d4v7n button {
      grid-template-columns: 30px 56px 1fr 15px;
      padding-block: 18px;
    }
    .m2q8d4v7n img {
      height: 73px;
    }
    .p2m6n8r4v {
      display: flex;
      flex-direction: column-reverse;
      padding-block: 55px;
      gap: 45px;
    }
    .g4r8n2m6p h2 {
      font-size: 29px;
    }
    .t7v3k9m2r {
      width: 278px;
    }
    .w3n7q2m8v {
      height: 250px;
    }
    .w3n7q2m8v > strong {
      font-size: 19px;
    }
    .j8n4p2v6r {
      margin-top: 16px;
    }
    .e3p7v2m9r {
      grid-template-columns: 1fr;
      gap: 28px;
      margin-top: 30px;
    }
    .e3p7v2m9r li {
      position: relative;
      padding: 22px 0 0 58px;
    }
    .e3p7v2m9r li > span {
      position: absolute;
      top: 22px;
      left: 0;
      font-size: 31px;
    }
    .e3p7v2m9r h3 {
      margin: 4px 0 9px;
      font-size: 17px;
    }
    .e3p7v2m9r p {
      font-size: 11px;
      margin-bottom: 12px;
    }
    .z2m8v4r6p {
      grid-template-columns: 1fr;
      gap: 50px;
    }
    .p6v2r9m4k blockquote {
      font-size: 13px;
    }
    .n2m8p4v6r summary {
      font-size: 12px;
    }
    .n2m8p4v6r details p {
      font-size: 11px;
    }
    .q8m2r6v4n {
      padding: 30px 24px;
      gap: 25px;
    }
    .q8m2r6v4n h2 {
      font-size: 25px;
    }
    .q8m2r6v4n > div > p:not(.e6v3n8d2p) {
      font-size: 12px;
    }
    .q8m2r6v4n .x2r9v5m7p {
      gap: 20px;
    }
    .q8m2r6v4n .d4v8r2m6p {
      font-size: 12px;
      padding: 12px 16px;
      min-height: 47px;
    }
    .q8m2r6v4n .s6n3v8r2k {
      font-size: 11px;
    }
    .h2p8m4v6r h3 {
      font-size: 21px;
    }
    .w8m2v6r4p {
      padding-top: 45px;
    }
    .m8p4r2v6n {
      grid-template-columns: 1fr;
      gap: 32px;
      padding-bottom: 30px;
    }
    .m8p4r2v6n nav > div {
      grid-template-columns: repeat(3, 1fr);
      gap: 14px 10px;
      font-size: 10px;
    }
    .r6m2p8v4n {
      align-items: start;
      gap: 10px;
      font-size: 9px;
    }
    .c2r8m4v6p {
      position: fixed;
      display: flex;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 19;
      padding: 8px 12px max(9px, env(safe-area-inset-bottom));
      background: #fdfdf6f5;
      border-top: 1px solid #c4cbbb;
      backdrop-filter: blur(15px);
      justify-content: space-around;
      box-shadow: 0 -5px 25px #151f1010;
    }
    .c2r8m4v6p a {
      min-width: 58px;
      text-align: center;
      font-size: 9px;
      color: #58644a;
    }
    .c2r8m4v6p a > span {
      font-size: 18px;
      line-height: 1.3;
      display: block;
      color: #202b16;
    }
    .c2r8m4v6p a:last-child {
      background: #ffe04a;
      border-radius: 8px;
    }
    .j2r8m4v6p > div {
      padding: 35px 25px;
    }
    .j2r8m4v6p h2 {
      font-size: 25px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
    [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
    }
  }
}