@charset "UTF-8";
@layer base, shell, cinema, collection, narrative, mobile;
@layer base {
  :root {
    color-scheme: dark;
    --a: #ff8a58;
    --b: #f0ece9;
    --c: #a3a0aa;
    --d: #25242c;
    --e: #101014;
    --f: #17171e;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
  }
  body {
    margin: 0;
    background: var(--e);
    color: var(--b);
    font:
      15px/1.7 "Microsoft YaHei",
      "PingFang SC",
      system-ui,
      sans-serif;
  }
  button,
  input {
    font: inherit;
  }
  button,
  a,
  summary,
  input {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    color: inherit;
    cursor: pointer;
  }
  button,
  input {
    border: 0;
  }
  button {
    background: none;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  a,
  button,
  summary {
    touch-action: manipulation;
  }
  :focus-visible {
    outline: 2px solid #ffb28c;
    outline-offset: 5px;
    border-radius: 4px;
  }
  a,
  button {
    transition:
      color 0.2s,
      background-color 0.2s,
      transform 0.2s,
      border-color 0.2s;
  }
  a:hover,
  button:hover {
    color: #ffb18a;
  }
  h1,
  h2,
  h3,
  p,
  figure {
    margin: 0;
  }
  h2 {
    font-size: clamp(25px, 2.25vw, 34px);
    line-height: 1.4;
    letter-spacing: -0.8px;
    font-weight: 750;
  }
  h3 {
    font-size: 18px;
    line-height: 1.5;
  }
  img {
    display: block;
    max-width: 100%;
    object-fit: cover;
    background: #23212a;
  }
  [hidden] {
    display: none !important;
  }
  section,
  nav[id] {
    scroll-margin-top: 0;
  }
  .v7q2h9m4 {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  a.v7q2h9m4:focus {
    width: auto;
    height: auto;
    clip-path: none;
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 99;
    padding: 12px 24px;
    background: #fff;
    color: #111;
  }
  .n8v4q2m7 {
    max-width: 1416px;
    margin-inline: auto;
    padding-inline: 44px;
  }
  .u6s3v8q2 {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 650;
    color: #b0a5c3;
    line-height: 1.6;
  }
  .g4q8b3m7 {
    color: var(--c);
    font-size: 13px;
    line-height: 1.9;
  }
  .c8w3p6m2 {
    color: #a3a0aa;
    font-size: 11px;
    line-height: 1.8;
  }
  .b5k8n3v7 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: 7px;
    padding: 13px 22px;
    background: linear-gradient(115deg, #ffb578, #ff705d 58%, #bd6bef);
    color: #171116;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 5px 26px #f77a5b14;
  }
  .b5k8n3v7:hover {
    color: #101014;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px #f77a5b35;
  }
  .p4n8k2v6 {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 13px;
  }
  .x2m8v4n7 {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
  }
  .x2m8v4n7 h2 {
    margin-top: 8px;
  }
  .x2m8v4n7 h2 > span {
    display: inline-block;
    margin-left: 18px;
    font-size: 13px;
    color: var(--c);
    font-weight: 400;
    letter-spacing: 0;
  }
  .x2m8v4n7 > a {
    color: #c5c0cd;
    font-size: 12px;
    white-space: nowrap;
  }
  [data-arrive] {
    transition:
      opacity 0.65s ease,
      transform 0.65s ease;
  }
  html[data-motion="enabled"] [data-arrive]:not([data-arrived]) {
    opacity: 0;
    transform: translateY(22px);
  }
}
@layer shell {
  .w6r3k9c2 {
    height: 96px;
    margin-left: 150px;
    padding: 0 44px;
    border-bottom: 1px solid var(--d);
    display: flex;
    align-items: center;
    gap: 48px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #101014ee;
    backdrop-filter: blur(18px);
  }
  .e2n9v5r7 {
    font-size: 23px;
    line-height: 1.2;
    flex-shrink: 0;
  }
  .e2n9v5r7 a {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .e2n9v5r7 img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }
  .e2n9v5r7 small {
    display: block;
    color: #ae9d90;
    font-size: 8px;
    letter-spacing: 2px;
    margin-top: 4px;
    font-weight: 500;
  }
  .z5w9p3c7 {
    display: flex;
    gap: 30px;
    font-size: 13px;
  }
  .z5w9p3c7 a:first-child {
    color: var(--a);
  }
  .d4n7v3k8 {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-left: auto;
  }
  .d4n7v3k8 > a:first-child {
    font-size: 12px;
    color: var(--c);
  }
  .d4n7v3k8 > a:first-child > span {
    font-size: 24px;
    vertical-align: middle;
    margin-right: 7px;
  }
  .d4n7v3k8 .b5k8n3v7 {
    padding: 9px 17px;
  }
  .h8q3w6m2 {
    display: none;
    font-size: 23px;
    padding: 8px;
  }
  .k3d8p5v2 {
    width: 150px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 22;
    background: #131318;
    padding: 37px 17px 20px;
    border-right: 1px solid var(--d);
    overflow-y: auto;
  }
  .k3d8p5v2 > p {
    color: #90899b;
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 0 12px 29px;
  }
  .k3d8p5v2 nav {
    display: grid;
    gap: 7px;
  }
  .k3d8p5v2 nav a {
    font-size: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    color: #aba8b4;
    position: relative;
  }
  .k3d8p5v2 nav a[aria-current="location"] {
    color: #ffb68c;
    background: #ff9c6810;
  }
  .k3d8p5v2 nav a[aria-current="location"]::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 16px;
    background: var(--a);
    left: -17px;
    top: 12px;
  }
  .k3d8p5v2 nav a:hover {
    color: #fff;
    background: #ffffff08;
  }
  .j7m3r8p2 {
    font-size: 11px;
    color: #90899b;
    padding: 20px 12px;
    display: block;
    margin-top: 18px;
    border-top: 1px solid var(--d);
  }
  .a6v2r9k4 {
    display: block;
    padding: 15px 12px;
    font-size: 8px;
    line-height: 1.8;
    letter-spacing: 1px;
    color: #696271;
  }
  .t2p8v5n3,
  .q2v8m3n7 {
    margin-left: 150px;
  }
  .n9p3v7k2 {
    display: none;
  }
}
@layer cinema {
  .j4r7m2k9 {
    max-width: 1490px;
    margin-inline: auto;
    padding: 42px 44px 38px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    min-height: 650px;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    position: relative;
  }
  .j4r7m2k9::before {
    content: "";
    width: 650px;
    height: 650px;
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, #bd684418, transparent 65%);
    left: 18%;
    top: -170px;
  }
  .o9b3v7q2 {
    padding: 30px 0;
  }
  .o9b3v7q2 .u6s3v8q2 {
    color: #e1b89c;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .o9b3v7q2 .u6s3v8q2 > span {
    background: #ff9971;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 18px #ff9971;
  }
  .o9b3v7q2 h2 {
    font-size: clamp(48px, 4.6vw, 76px);
    line-height: 1.22;
    letter-spacing: -3px;
    margin: 24px 0 22px;
  }
  .o9b3v7q2 h2 > span {
    background: linear-gradient(100deg, #ffbd90, #ff886b 55%, #d5a3fb);
    background-clip: text;
    color: transparent;
  }
  .x8q4m2v7 {
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  .o9b3v7q2 .g4q8b3m7 {
    max-width: 350px;
  }
  .m7v2r8q4 {
    display: flex;
    gap: 26px;
    align-items: center;
    margin: 28px 0 15px;
  }
  .v5k9n2r7 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 42px;
  }
  .v5k9n2r7 > span:first-child {
    color: var(--a);
    font:
      27px/1.4 Georgia,
      serif;
    padding-right: 20px;
    border-right: 1px solid #3d3435;
  }
  .v5k9n2r7 b {
    font-size: 15px;
    font-weight: 400;
    color: #746f7c;
  }
  .v5k9n2r7 > span:last-child {
    color: #b4acbc;
    font-size: 10px;
    line-height: 1.9;
  }
  .v5k9n2r7 strong {
    font-weight: 400;
    color: #f1e5e1;
    font-size: 12px;
  }
  .d8p3v6m2 {
    position: relative;
    min-width: 0;
    background: linear-gradient(145deg, #23202a, #1a191f);
    border: 1px solid #ffffff0c;
    border-radius: 14px;
    padding: 18px 18px 0;
    align-self: center;
  }
  .a4r8k2n7 {
    display: flex;
    justify-content: space-between;
    color: #bbb1c8;
    font-size: 9px;
    letter-spacing: 1.8px;
    padding: 2px 2px 17px;
  }
  .a4r8k2n7 > span:last-child {
    font-size: 20px;
    line-height: 12px;
    color: #ffc095;
  }
  .f8n2w7p4 {
    display: flex;
    height: 318px;
    gap: 10px;
    align-items: stretch;
    overflow: hidden;
    border-radius: 6px;
  }
  .q8j5m3v7 {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    transition:
      flex 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 0.8s;
    filter: saturate(0.65) brightness(0.6);
  }
  .q8j5m3v7[data-active] {
    flex: 3.1;
    filter: saturate(0.9) brightness(0.95);
  }
  .q8j5m3v7::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, #151219b0);
  }
  .q8j5m3v7 img {
    width: 100%;
    height: 100%;
    object-position: center 25%;
    transition: transform 0.8s;
  }
  .q8j5m3v7[data-active] img {
    transform: scale(1.025);
  }
  .q8j5m3v7 > span {
    position: absolute;
    right: 15px;
    bottom: 18px;
    writing-mode: vertical-rl;
    z-index: 1;
    font:
      22px/1.4 "KaiTi",
      "STKaiti",
      serif;
    letter-spacing: 4px;
  }
  .n2q7m4v8 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 19px 4px 20px;
  }
  .n2q7m4v8 span {
    color: #c5ab9c;
    font-size: 10px;
  }
  .n2q7m4v8 h3 {
    font-size: 27px;
    margin: 2px 0;
  }
  .n2q7m4v8 p {
    color: #bcb4c5;
    font-size: 11px;
  }
  .n2q7m4v8 > button {
    border: 1px solid #6b575e;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 22px;
  }
  .n2q7m4v8 > button:hover {
    background: #ff9c6820;
    transform: rotate(6deg);
  }
  .q3v8k5p2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 35px;
    border-top: 1px solid #3c3039;
  }
  .q3v8k5p2 > button {
    position: relative;
    padding: 17px 6px;
    font-size: 10px;
    color: #a69fae;
    display: flex;
    gap: 7px;
    align-items: center;
  }
  .q3v8k5p2 > button > span {
    color: #776a78;
    font-size: 9px;
  }
  .q3v8k5p2 i {
    font-style: normal;
    margin-left: auto;
  }
  .q3v8k5p2 > button[aria-pressed="true"] {
    color: #ffb992;
  }
  .q3v8k5p2 > button[data-scene][aria-pressed="true"]::before {
    content: "";
    height: 2px;
    background: var(--a);
    position: absolute;
    top: -1px;
    left: 4px;
    right: 4px;
  }
  .q3v8k5p2 > button[data-pause] {
    border-left: 1px solid #3c3039;
    justify-content: center;
    font-size: 13px;
  }
  .h3k7v2m9 {
    margin: 40px 0 56px;
  }
  .v2m6p9k3 {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 16px;
  }
  .y7p4n2c8 {
    min-height: 236px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #24212b;
  }
  .y7p4n2c8 > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: center 30%;
    opacity: 0.72;
    transition: transform 0.6s;
  }
  .y7p4n2c8:hover > img {
    transform: scale(1.055);
  }
  .y7p4n2c8::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #131016fa, #13101690 55%, #13101600);
    pointer-events: none;
  }
  .y7p4n2c8 > div {
    position: relative;
    z-index: 1;
    padding: 24px;
    min-height: 236px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
  }
  .y7p4n2c8 .u6s3v8q2 {
    color: #f2c6a8;
    font-size: 8px;
    margin-bottom: 36px;
  }
  .y7p4n2c8 h3 {
    font-size: 24px;
  }
  .y7p4n2c8 p:not(.u6s3v8q2) {
    color: #c7c1c9;
    font-size: 11px;
    margin: 5px 0 16px;
  }
  .y7p4n2c8 button {
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 11px;
  }
}
@layer collection {
  .k5q9m3v7 {
    border-block: 1px solid var(--d);
    padding: 28px 0;
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 30px;
    margin-bottom: 64px;
    align-items: center;
  }
  .c6r2n8w4 .u6s3v8q2 {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .c6r2n8w4 h2 {
    font-size: 23px;
    margin-top: 10px;
  }
  .r3p8k2m6 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }
  .r3p8k2m6 article {
    min-width: 0;
  }
  .r3p8k2m6 article > span {
    color: var(--a);
    display: block;
    font-size: 23px;
    margin-bottom: 4px;
  }
  .r3p8k2m6 h3 {
    font-size: 13px;
    margin-bottom: 5px;
  }
  .r3p8k2m6 p {
    color: var(--c);
    font-size: 10px;
    line-height: 1.8;
  }
  .w8k3p7n2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 278px;
    gap: 36px;
    margin-bottom: 72px;
    align-items: start;
  }
  .l3v7q2m8 .x2m8v4n7 h2 > span {
    display: block;
    margin-left: 0;
    margin-top: 7px;
  }
  .n4r8q3v7 {
    display: grid;
    gap: 18px;
  }
  .g7m2p9k4 {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .g7m2p9k4 button {
    padding: 7px 14px;
    border: 1px solid #34313c;
    border-radius: 5px;
    color: #b8b1c1;
    font-size: 11px;
  }
  .g7m2p9k4 button[aria-pressed="true"] {
    color: #ffb891;
    background: #ff9d6818;
    border-color: #88583f;
  }
  .n4r8q3v7 form {
    display: flex;
    max-width: 100%;
    border-bottom: 1px solid #38343e;
  }
  .n4r8q3v7 input {
    background: transparent;
    padding: 9px 2px;
    color: #eee9f0;
    min-width: 0;
    flex: 1;
    font-size: 12px;
  }
  .n4r8q3v7 input::placeholder {
    color: #9e95aa;
  }
  .n4r8q3v7 form button {
    font-size: 24px;
    padding: 0 12px;
  }
  .s7v3n8p2 {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    color: #a39aaa;
    margin: 16px 0 22px;
    align-items: center;
  }
  .s7v3n8p2 button {
    font-size: 10px;
    padding: 5px 0;
    white-space: nowrap;
  }
  .q7m3v8k2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px 18px;
  }
  .r9b4k7m2 {
    min-width: 0;
  }
  .s2w8p5n3 {
    padding: 0;
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background: #232029;
  }
  .s2w8p5n3 > img {
    width: 100%;
    height: 100%;
    object-position: center 20%;
    transition: transform 0.6s;
  }
  .s2w8p5n3::after {
    content: "";
    position: absolute;
    inset: 60% 0 0;
    background: linear-gradient(transparent, #100b17b0);
  }
  .s2w8p5n3:hover > img {
    transform: scale(1.06);
  }
  .l7r2d9v4 {
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 10px;
    background: #111018c9;
    border: 1px solid #ffffff29;
    padding: 2px 7px;
    color: #fff;
    border-radius: 3px;
    font-size: 9px;
  }
  .c3n6q8w2 {
    position: absolute;
    bottom: 16px;
    z-index: 1;
    left: 13px;
    right: 13px;
    background: #f4e5de;
    color: #211821;
    padding: 8px;
    border-radius: 5px;
    font-size: 11px;
    opacity: 0;
    transform: translateY(6px);
    transition: 0.25s;
  }
  .s2w8p5n3:hover .c3n6q8w2,
  .s2w8p5n3:focus-visible .c3n6q8w2 {
    opacity: 1;
    transform: none;
  }
  .f3m7v2k9 {
    padding: 12px 0 0;
  }
  .f3m7v2k9 > span {
    font-size: 9px;
    color: #b8a191;
  }
  .f3m7v2k9 h3 {
    font-size: 15px;
    margin: 3px 0;
  }
  .f3m7v2k9 h3 button {
    padding: 0;
    text-align: left;
  }
  .f3m7v2k9 p {
    font-size: 10px;
    color: var(--c);
  }
  .a7p3n8w2 {
    padding: 45px 20px;
    text-align: center;
    color: var(--c);
    font-size: 13px;
    border: 1px dashed #45404b;
    border-radius: 8px;
  }
  .b8n3p6v2 {
    position: sticky;
    top: 122px;
  }
  .b8n3p6v2 > section {
    padding: 25px 23px;
    border: 1px solid #35303e;
    border-radius: 10px;
    background: linear-gradient(155deg, #211e2b, #17171e 65%);
  }
  .b8n3p6v2 header h2 {
    font-size: 25px;
    margin: 8px 0;
    display: flex;
    justify-content: space-between;
  }
  .b8n3p6v2 header h2 > span {
    font-size: 30px;
    color: var(--a);
  }
  .b8n3p6v2 header > p:last-child {
    color: #a59ab2;
    font-size: 11px;
  }
  .w7p2n8k4 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #b8a6cf;
    padding: 18px 0 12px;
    border-bottom: 1px solid #3e344a;
  }
  .w7p2n8k4 > span {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .b8n3p6v2 ol {
    list-style: none;
    padding: 0;
    margin: 4px 0 16px;
  }
  .b8n3p6v2 li {
    border-bottom: 1px solid #2a2631;
  }
  .b8n3p6v2 li button {
    padding: 16px 0;
    display: flex;
    text-align: left;
    align-items: center;
    gap: 13px;
    width: 100%;
  }
  .b8n3p6v2 li button > span:first-child {
    color: #8e7e9d;
    font:
      italic 23px/1 Georgia,
      serif;
  }
  .b8n3p6v2 li:first-child button > span:first-child {
    color: #ffb17d;
  }
  .b8n3p6v2 li strong {
    font-size: 13px;
    font-weight: 600;
    display: block;
  }
  .b8n3p6v2 li small {
    display: block;
    color: #9e90aa;
    font-size: 9px;
    margin-top: 3px;
  }
  .b8n3p6v2 li i {
    font-style: normal;
    margin-left: auto;
    color: #9d8aaa;
  }
  .b8n3p6v2 .g4q8b3m7 {
    font-size: 10px;
  }
  .b8n3p6v2 .p4n8k2v6 {
    font-size: 11px;
    margin-top: 20px;
    color: #e2c3f6;
  }
  .e9k3r7m2 {
    padding: 24px 10px 0;
  }
  .e9k3r7m2 > span {
    color: var(--a);
    font-size: 25px;
  }
  .e9k3r7m2 p {
    font:
      24px/1.8 "KaiTi",
      serif;
    color: #c8b8c9;
    margin: 5px 0 12px;
  }
  .e9k3r7m2 a {
    font-size: 10px;
    color: #a297ae;
  }
}
@layer narrative {
  .t8m2q6v4 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    border-block: 1px solid var(--d);
    padding: 52px 0 48px;
    margin-bottom: 62px;
  }
  .p9v3n7k2 {
    min-width: 0;
  }
  .p9v3n7k2 h2 {
    margin: 10px 0 12px;
    font-size: 32px;
  }
  .p9v3n7k2 header .g4q8b3m7 {
    max-width: 425px;
    font-size: 12px;
  }
  .b3w8p2n7 {
    position: relative;
    margin: 35px 0 18px;
    padding: 12px 60px 34px 0;
    min-height: 306px;
  }
  .d7k2v9m3 {
    border: 5px solid #33303b;
    border-bottom-width: 15px;
    background: #1c1a22;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 18px 24px #0003;
    transform: perspective(900px) rotateY(4deg);
    padding: 0 16px 13px;
  }
  .d7k2v9m3 > div:first-child {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 34px;
  }
  .d7k2v9m3 i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #786c85;
  }
  .d7k2v9m3 > div:first-child > span {
    font-size: 7px;
    margin-left: 7px;
    color: #b9adbf;
  }
  .d7k2v9m3 > strong {
    font-size: 19px;
    display: block;
    margin: 3px 0 15px;
  }
  .n6p3v8k2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .n6p3v8k2 img {
    width: 100%;
    height: 120px;
    border-radius: 3px;
  }
  .d7k2v9m3 > small {
    display: block;
    font-size: 7px;
    color: #9c91a5;
    margin-top: 12px;
  }
  .r8m2p6v4 {
    width: 130px;
    position: absolute;
    right: 0;
    bottom: 5px;
    border: 5px solid #45404e;
    border-radius: 22px;
    background: #1d1923;
    box-shadow: -15px 15px 30px #0007;
    padding: 8px 9px 14px;
    transform: rotate(4deg);
  }
  .r8m2p6v4 > span {
    width: 34px;
    height: 5px;
    border-radius: 10px;
    background: #4b4553;
    display: block;
    margin: 0 auto 8px;
  }
  .r8m2p6v4 img {
    width: 100%;
    height: 135px;
    border-radius: 10px;
  }
  .r8m2p6v4 > strong {
    display: block;
    font-size: 13px;
    margin-top: 7px;
  }
  .r8m2p6v4 > small {
    display: block;
    font-size: 6px;
    color: #c4a790;
  }
  .r8m2p6v4 p {
    font-size: 7px;
    color: #b5a6bd;
    margin: 8px 0;
  }
  .r8m2p6v4 a {
    display: block;
    padding: 6px;
    background: #dba780;
    color: #18111a;
    border-radius: 4px;
    font-size: 7px;
    text-align: center;
  }
  .v9k3m7q2 {
    padding-top: 10px;
  }
  .v9k3m7q2 h2 {
    margin: 10px 0 8px;
  }
  .v9k3m7q2 ol {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
  }
  .v9k3m7q2 li {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 30px;
  }
  .v9k3m7q2 li:last-child {
    padding-bottom: 0;
  }
  .v9k3m7q2 li > span {
    font-size: 12px;
    flex-shrink: 0;
    border: 1px solid #5c4243;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 33px;
    text-align: center;
    color: #f4b495;
    background: #221b21;
  }
  .v9k3m7q2 li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 43px;
    bottom: 8px;
    border-left: 1px dashed #42323c;
  }
  .v9k3m7q2 li h3 {
    font-size: 16px;
    margin: 3px 0 6px;
  }
  .v9k3m7q2 li p {
    color: var(--c);
    font-size: 12px;
    max-width: 310px;
  }
  .v9k3m7q2 li a {
    font-size: 11px;
    color: #f6b28f;
    display: inline-block;
    margin-top: 9px;
  }
  .k8v2m7p3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .k8v2m7p3 figure {
    background: #17171d;
    border-radius: 8px;
    border-top: 1px solid #453645;
    padding: 25px 26px;
  }
  .k8v2m7p3 figure > span {
    font:
      44px/1 Georgia,
      serif;
    color: #dca481;
    display: block;
    height: 32px;
  }
  .k8v2m7p3 blockquote {
    font-size: 12px;
    color: #c5becd;
    margin: 7px 0 22px;
    line-height: 2;
  }
  .k8v2m7p3 figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .k8v2m7p3 b {
    font-size: 11px;
    font-weight: 500;
  }
  .k8v2m7p3 small {
    font-size: 9px;
    color: #a396ac;
  }
  .m3p8v2n7 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    margin: 70px 0 84px;
    align-items: start;
  }
  .a3k8v2m7 > h2 {
    margin: 9px 0 20px;
  }
  .f7n3p8v2 details {
    border-bottom: 1px solid #322b38;
  }
  .f7n3p8v2 summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    font-size: 12px;
  }
  .f7n3p8v2 summary::-webkit-details-marker {
    display: none;
  }
  .f7n3p8v2 summary > span {
    font-size: 10px;
    color: #a286a4;
  }
  .f7n3p8v2 summary > i {
    font-style: normal;
    margin-left: auto;
    font-size: 20px;
    color: #c9b6d5;
    transition: transform 0.2s;
  }
  .f7n3p8v2 details[open] summary > i {
    transform: rotate(45deg);
  }
  .f7n3p8v2 details[open] summary {
    color: #ffc09c;
  }
  .f7n3p8v2 details > p {
    color: var(--c);
    font-size: 12px;
    margin: 0 0 20px 28px;
    line-height: 1.9;
  }
  .u8k2v6m3 {
    background: radial-gradient(ellipse at 90% 0, #684d6b66, transparent 60%),
      linear-gradient(145deg, #302528, #1b191f);
    border: 1px solid #59424e;
    border-radius: 12px;
    padding: 34px;
    overflow: hidden;
    position: relative;
  }
  .y3n8q2v7 {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
    font:
      italic 45px/1 Georgia,
      serif;
    color: #ffc29d;
  }
  .y3n8q2v7 > span {
    font:
      11px/1.3 "Microsoft YaHei",
      sans-serif;
    color: #d0b6c3;
  }
  .u8k2v6m3 > .y3n8q2v7 {
    position: absolute;
    top: 34px;
    right: 30px;
    transform: rotate(-10deg);
    opacity: 0.6;
  }
  .u8k2v6m3 .u6s3v8q2 {
    font-size: 8px;
    max-width: 180px;
  }
  .u8k2v6m3 h2 {
    font-size: 37px;
    line-height: 1.3;
    margin: 18px 0;
  }
  .w3p8k2m7 {
    font-size: 10px;
    border: 1px solid #896666;
    color: #e7c0b1;
    border-radius: 4px;
    padding: 5px 9px;
  }
  .u8k2v6m3 > p:not(.u6s3v8q2) {
    font-size: 12px;
    color: #cbbac8;
    margin: 24px 0;
  }
  .u8k2v6m3 > .b5k8n3v7 {
    display: flex;
    justify-content: space-between;
  }
  .u8k2v6m3 > .p4n8k2v6 {
    display: block;
    text-align: center;
    font-size: 11px;
    margin-top: 17px;
  }
  .u8k2v6m3 > small {
    display: block;
    color: #b4a1b4;
    font-size: 10px;
    margin-top: 22px;
    line-height: 1.9;
  }
  .q2v8m3n7 {
    border-top: 1px solid var(--d);
    background: #141319;
    padding: 48px 0 0;
  }
  .g8n3v7p2 {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    padding-bottom: 36px;
  }
  .g8n3v7p2 h2 {
    font-size: 25px;
    margin-top: 8px;
  }
  .g8n3v7p2 h2 span {
    font-size: 13px;
    display: block;
    color: #a99caf;
    margin-top: 9px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .g8n3v7p2 > p {
    font-size: 11px;
    color: #b0a4b8;
    line-height: 2.1;
  }
  .p2k7v9m3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.2fr;
    gap: 22px;
    padding: 32px 0;
    border-top: 1px solid var(--d);
  }
  .p2k7v9m3 h3 {
    font-size: 12px;
    margin-bottom: 15px;
  }
  .p2k7v9m3 a {
    font-size: 11px;
    color: #b0a4b8;
    display: block;
    padding: 4px 0;
  }
  .p2k7v9m3 > div:last-child {
    text-align: right;
  }
  .p2k7v9m3 p {
    font-size: 11px;
    color: #b0a4b8;
    margin-top: 12px;
  }
  .r2m7v4p8 {
    padding: 22px 0;
    border-top: 1px solid var(--d);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    color: #9e91a5;
    font-size: 9px;
  }
  .i3m8v2n7 {
    border: 1px solid #615165;
    background: #1b1721;
    color: var(--b);
    padding: 0;
    max-width: 780px;
    width: calc(100% - 40px);
    max-height: 90dvh;
    border-radius: 13px;
    box-shadow: 0 30px 100px #0008;
  }
  .i3m8v2n7::backdrop {
    background: #09070cce;
    backdrop-filter: blur(8px);
  }
  .i3m8v2n7 > div {
    display: grid;
    grid-template-columns: 270px 1fr;
    position: relative;
  }
  .i3m8v2n7 [data-dialog-image] {
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-position: center 20%;
  }
  .z8k3p7v2 {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 35px;
    height: 35px;
    background: #211826e6;
    border: 1px solid #8b758d;
    border-radius: 50%;
    font-size: 24px;
    z-index: 1;
    line-height: 1;
  }
  .w2n8p3v7 {
    padding: 42px 30px 30px;
  }
  .w2n8p3v7 h2 {
    margin: 8px 0 18px;
  }
  .w2n8p3v7 > p:not(.u6s3v8q2) {
    margin-bottom: 15px;
    font-size: 12px;
    color: #c7bace;
    line-height: 1.9;
  }
  .w2n8p3v7 > .b5k8n3v7 {
    font-size: 11px;
    margin: 0 0 18px;
    padding: 11px 15px;
  }
  .w2n8p3v7 > p.g4q8b3m7 {
    font-size: 10px;
    color: #b5a3bf;
  }
  .x7m3n8v2 {
    padding: 15px;
    background: #33272b;
    text-align: center;
  }
}
@layer mobile {
  @media (min-width: 1750px) {
    .w6r3k9c2 {
      padding-inline: max(44px, calc((100vw - 150px - 1328px) / 2));
    }
  }
  @media (max-width: 1280px) {
    .w6r3k9c2 {
      gap: 30px;
      padding-inline: 30px;
    }
    .z5w9p3c7 {
      gap: 20px;
    }
    .d4n7v3k8 > a:first-child {
      display: none;
    }
    .j4r7m2k9 {
      padding-inline: 30px;
      gap: 24px;
      min-height: 610px;
    }
    .m7v2r8q4 {
      flex-wrap: wrap;
      gap: 15px;
    }
    .n8v4q2m7 {
      padding-inline: 30px;
    }
    .f8n2w7p4 {
      height: 285px;
    }
    .w8k3p7n2 {
      grid-template-columns: minmax(0, 1fr) 245px;
      gap: 25px;
    }
    .k5q9m3v7 {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .c6r2n8w4 {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .c6r2n8w4 h2 {
      margin-top: 0;
    }
    .t8m2q6v4,
    .m3p8v2n7 {
      gap: 32px;
    }
    .k8v2m7p3 {
      gap: 16px;
    }
    .k8v2m7p3 figure {
      padding: 22px 18px;
    }
    .x2m8v4n7 h2 > span {
      display: block;
      margin: 6px 0 0;
    }
  }
  @media (max-width: 1050px) {
    .k3d8p5v2 {
      width: 126px;
      padding-inline: 12px;
    }
    .w6r3k9c2,
    .t2p8v5n3,
    .q2v8m3n7 {
      margin-left: 126px;
    }
    .z5w9p3c7 {
      display: none;
    }
    .j4r7m2k9 {
      gap: 20px;
      grid-template-columns: 0.9fr 1.1fr;
    }
    .o9b3v7q2 h2 {
      font-size: 48px;
    }
    .x8q4m2v7 {
      font-size: 14px;
    }
    .o9b3v7q2 .g4q8b3m7 {
      font-size: 11px;
    }
    .m7v2r8q4 {
      flex-direction: column;
      align-items: start;
    }
    .v5k9n2r7 {
      margin-top: 25px;
    }
    .d8p3v6m2 {
      padding: 14px 12px 0;
    }
    .f8n2w7p4 {
      height: 285px;
      gap: 6px;
    }
    .q8j5m3v7[data-active] {
      flex: 4;
    }
    .q8j5m3v7 > span {
      right: 6px;
      font-size: 17px;
    }
    .q3v8k5p2 > button {
      font-size: 9px;
      gap: 4px;
    }
    .q3v8k5p2 > button > span,
    .q3v8k5p2 i {
      display: none;
    }
    .w8k3p7n2 {
      grid-template-columns: minmax(0, 1fr) 224px;
      gap: 24px;
    }
    .q7m3v8k2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .b8n3p6v2 > section {
      padding: 20px 17px;
    }
    .v2m6p9k3 {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .y7p4n2c8 > div {
      padding: 18px;
    }
    .y7p4n2c8 h3 {
      font-size: 21px;
    }
    .t8m2q6v4 {
      grid-template-columns: 1.1fr 1fr;
      gap: 28px;
    }
    .b3w8p2n7 {
      padding-right: 40px;
    }
    .r8m2p6v4 {
      width: 112px;
    }
    .n6p3v8k2 img {
      height: 95px;
    }
    .u8k2v6m3 {
      padding: 26px;
    }
    .g8n3v7p2 {
      gap: 35px;
    }
    .k8v2m7p3 figcaption {
      display: grid;
      gap: 2px;
    }
  }
  @media (max-width: 820px) {
    html {
      scroll-padding-top: 85px;
    }
    section,
    nav[id] {
      scroll-margin-top: 0;
    }
    .w6r3k9c2,
    .t2p8v5n3,
    .q2v8m3n7 {
      margin-left: 0;
    }
    .w6r3k9c2 {
      height: 76px;
      padding-inline: 24px;
    }
    .k3d8p5v2 {
      display: none;
      width: 270px;
      top: 76px;
      left: auto;
      right: 0;
      bottom: 66px;
      border-left: 1px solid #463747;
      padding: 25px;
      box-shadow: -25px 0 50px #0008;
    }
    .k3d8p5v2[data-expanded] {
      display: block;
    }
    .k3d8p5v2 nav {
      gap: 2px;
    }
    .k3d8p5v2 nav a {
      font-size: 13px;
    }
    .k3d8p5v2 > p {
      padding-bottom: 18px;
    }
    .a6v2r9k4 {
      display: none;
    }
    .h8q3w6m2 {
      display: block;
    }
    .d4n7v3k8 {
      gap: 15px;
    }
    .j4r7m2k9 {
      min-height: 600px;
      padding-inline: 24px;
      padding-top: 25px;
    }
    .n8v4q2m7 {
      padding-inline: 24px;
    }
    .n9p3v7k2 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 21;
      background: #17141cf2;
      border-top: 1px solid #443346;
      backdrop-filter: blur(15px);
      padding: 7px 10px max(7px, env(safe-area-inset-bottom));
    }
    .n9p3v7k2 a {
      text-align: center;
      font-size: 9px;
      color: #c3b5cb;
      padding: 2px;
    }
    .n9p3v7k2 span {
      display: block;
      font-size: 20px;
      line-height: 1.2;
      margin-bottom: 3px;
    }
    .q2v8m3n7 {
      padding-bottom: 75px;
    }
  }
  @media (max-width: 620px) {
    .w6r3k9c2 {
      height: 70px;
      padding-inline: 18px;
    }
    .e2n9v5r7 {
      font-size: 20px;
    }
    .e2n9v5r7 img {
      width: 31px;
      height: 31px;
    }
    .e2n9v5r7 small {
      font-size: 6px;
    }
    .d4n7v3k8 .b5k8n3v7 {
      font-size: 10px;
      padding: 8px 11px;
      gap: 9px;
    }
    .d4n7v3k8 {
      gap: 9px;
    }
    .k3d8p5v2 {
      top: 70px;
    }
    .j4r7m2k9 {
      grid-template-columns: 1fr;
      padding: 25px 18px 22px;
      gap: 20px;
    }
    .o9b3v7q2 {
      padding: 12px 3px 0;
    }
    .o9b3v7q2 h2 {
      font-size: 54px;
      line-height: 1.18;
      margin: 17px 0 17px;
    }
    .o9b3v7q2 h2 > br {
      display: initial;
    }
    .o9b3v7q2 h2 {
      max-width: 330px;
    }
    .o9b3v7q2 .u6s3v8q2 {
      font-size: 8px;
    }
    .x8q4m2v7 {
      font-size: 15px;
      letter-spacing: 0.5px;
    }
    .o9b3v7q2 .g4q8b3m7 {
      font-size: 12px;
      max-width: 340px;
    }
    .m7v2r8q4 {
      flex-direction: row;
      align-items: center;
      gap: 18px;
      margin-top: 22px;
    }
    .m7v2r8q4 .b5k8n3v7 {
      padding: 12px 15px;
      font-size: 11px;
      gap: 9px;
    }
    .m7v2r8q4 .p4n8k2v6 {
      font-size: 11px;
      gap: 8px;
    }
    .v5k9n2r7 {
      display: none;
    }
    .d8p3v6m2 {
      padding: 13px 12px 0;
    }
    .f8n2w7p4 {
      height: 250px;
    }
    .q8j5m3v7[data-active] {
      flex: 3.3;
    }
    .q8j5m3v7 > span {
      font-size: 18px;
      right: 10px;
    }
    .n2q7m4v8 {
      padding-block: 13px;
    }
    .n2q7m4v8 h3 {
      font-size: 24px;
    }
    .n2q7m4v8 p {
      font-size: 10px;
    }
    .q3v8k5p2 > button {
      font-size: 10px;
      padding-block: 15px;
    }
    .q3v8k5p2 > button > span {
      display: inline;
    }
    .n8v4q2m7 {
      padding-inline: 18px;
    }
    .h3k7v2m9 {
      margin: 30px 0 38px;
    }
    .x2m8v4n7 {
      gap: 10px;
      align-items: center;
      margin-bottom: 20px;
    }
    .x2m8v4n7 h2 {
      font-size: 25px;
    }
    .x2m8v4n7 h2 > span {
      font-size: 11px;
    }
    .x2m8v4n7 > a {
      font-size: 10px;
    }
    .v2m6p9k3 {
      display: flex;
      gap: 13px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 12px;
    }
    .y7p4n2c8 {
      flex: 0 0 82%;
      scroll-snap-align: start;
      min-height: 220px;
    }
    .y7p4n2c8 > div {
      min-height: 220px;
      padding: 22px;
    }
    .y7p4n2c8 .u6s3v8q2 {
      margin-bottom: 30px;
    }
    .k5q9m3v7 {
      margin-bottom: 40px;
      padding-block: 25px;
    }
    .c6r2n8w4 {
      display: block;
    }
    .c6r2n8w4 h2 {
      margin-top: 7px;
    }
    .r3p8k2m6 {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .r3p8k2m6 article {
      background: #19171e;
      padding: 15px;
      border-radius: 7px;
      border: 1px solid #312b37;
    }
    .r3p8k2m6 p {
      font-size: 11px;
    }
    .w8k3p7n2 {
      grid-template-columns: 1fr;
      gap: 36px;
      margin-bottom: 38px;
    }
    .q7m3v8k2 {
      gap: 22px 15px;
    }
    .g7m2p9k4 {
      gap: 7px;
    }
    .g7m2p9k4 button {
      font-size: 10px;
      padding: 7px 12px;
    }
    .s7v3n8p2 {
      font-size: 9px;
    }
    .f3m7v2k9 h3 {
      font-size: 14px;
    }
    .b8n3p6v2 {
      position: static;
    }
    .b8n3p6v2 > section {
      padding: 25px;
    }
    .b8n3p6v2 li button {
      padding-block: 15px;
    }
    .b8n3p6v2 li strong {
      font-size: 14px;
    }
    .e9k3r7m2 {
      display: none;
    }
    .t8m2q6v4 {
      grid-template-columns: 1fr;
      padding-block: 36px;
      gap: 35px;
      margin-bottom: 38px;
    }
    .p9v3n7k2 h2 {
      font-size: 29px;
    }
    .b3w8p2n7 {
      max-width: 440px;
      margin-inline: auto;
      min-height: 285px;
      padding-right: 50px;
    }
    .d7k2v9m3 {
      padding-inline: 12px;
    }
    .d7k2v9m3 > strong {
      font-size: 17px;
    }
    .n6p3v8k2 img {
      height: 112px;
    }
    .r8m2p6v4 {
      width: 120px;
    }
    .v9k3m7q2 {
      border-top: 1px solid var(--d);
      padding-top: 30px;
    }
    .v9k3m7q2 li p {
      max-width: 100%;
    }
    .k8v2m7p3 {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .k8v2m7p3 figure {
      padding: 23px;
    }
    .k8v2m7p3 figcaption {
      display: flex;
    }
    #voices .x2m8v4n7 {
      display: block;
    }
    #voices .x2m8v4n7 > span {
      display: block;
      margin-top: 12px;
      font-size: 10px;
    }
    .m3p8v2n7 {
      grid-template-columns: 1fr;
      margin: 40px 0 45px;
      gap: 36px;
    }
    .f7n3p8v2 summary {
      font-size: 11px;
      gap: 9px;
      padding-block: 20px;
    }
    .f7n3p8v2 details > p {
      font-size: 11px;
      margin-left: 21px;
    }
    .u8k2v6m3 {
      padding: 30px;
    }
    .u8k2v6m3 h2 {
      font-size: 34px;
    }
    .g8n3v7p2 {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    .p2k7v9m3 {
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
    .p2k7v9m3 > div:last-child {
      text-align: left;
    }
    .q2v8m3n7 {
      padding-top: 35px;
    }
    .r2m7v4p8 {
      display: grid;
      padding-block: 20px;
      font-size: 9px;
    }
    .i3m8v2n7 {
      max-height: 85dvh;
    }
    .i3m8v2n7 > div {
      grid-template-columns: 1fr;
    }
    .i3m8v2n7 [data-dialog-image] {
      height: 190px;
      min-height: 0;
      object-position: center 30%;
    }
    .w2n8p3v7 {
      padding: 25px;
    }
  }
  @media (max-width: 360px) {
    .d4n7v3k8 .b5k8n3v7 {
      display: none;
    }
    .o9b3v7q2 h2 {
      font-size: 47px;
    }
    .m7v2r8q4 {
      gap: 12px;
    }
    .g7m2p9k4 button {
      padding-inline: 9px;
    }
    .f8n2w7p4 {
      height: 225px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    html[data-motion="enabled"] [data-arrive]:not([data-arrived]) {
      opacity: 1;
      transform: none;
    }
  }
}