@layer foundation, composition, cinema, shelves, details, adaptive;
@layer foundation {
  :root {
    color-scheme: light;
    --paper: #fffdf6;
    --ink: #25251f;
    --soft: #6a6a5f;
    --line: #e5e3d8;
    --sun: #ffcf32;
    --lemon: #fff1a5;
    --round: 18px;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 108px;
  }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.75;
  }
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote {
    margin: 0;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button,
  summary {
    cursor: pointer;
  }
  button {
    font: inherit;
    color: inherit;
  }
  button,
  a,
  summary {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    background: none;
    border: 0;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  [hidden] {
    display: none !important;
  }
  :focus-visible {
    outline: 3px solid #a65b00;
    outline-offset: 5px;
  }
  h2 {
    font-size: clamp(24px, 2.4vw, 35px);
    line-height: 1.45;
    letter-spacing: -0.04em;
  }
  h2 > span {
    font-weight: 500;
  }
  h3 {
    font-size: 21px;
    line-height: 1.5;
  }
  button,
  a {
    touch-action: manipulation;
  }
  ::selection {
    background: var(--sun);
    color: var(--ink);
  }
  .a8m4q7v2 {
    width: min(1280px, calc(100% - 96px));
    margin-inline: auto;
  }
  .d7k3p9x5 {
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 700;
  }
  .b6n2h8r4 {
    color: var(--soft);
    font-size: 12px;
    line-height: 1.8;
  }
  .y6r2c8v4,
  .n8z4h6t2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 13px 23px;
    border-radius: 9px;
    font-weight: 700;
    line-height: 1.5;
    transition:
      transform 0.2s,
      box-shadow 0.2s;
  }
  .y6r2c8v4 {
    background: linear-gradient(115deg, #ffdb4b, #ffbb21);
    color: #28251a;
    box-shadow: 0 5px 12px #e7af2320;
  }
  .n8z4h6t2 {
    border: 1px solid #d6d1bf;
    background: #fffdf669;
  }
  .y6r2c8v4:hover,
  .n8z4h6t2:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 16px #6d4f1420;
  }
  .u4b8f2m6 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  a.u4b8f2m6:focus {
    z-index: 100;
    left: 18px;
    top: 18px;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 10px 20px;
    background: white;
  }
  .a2j6m8q4 {
    display: inline-block;
    border: 1px solid currentColor;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
  }
  [data-reveal][data-pending] {
    opacity: 0;
    transform: translateY(20px);
  }
  [data-reveal] {
    transition:
      opacity 0.55s ease,
      transform 0.55s ease;
  }
}
@layer composition {
  .c4r8h2z6 {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fffdf6f5;
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  [data-masthead] {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
  }
  .p6d2w8n4 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
  }
  .p6d2w8n4 small {
    display: block;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.13em;
    margin-top: 5px;
  }
  .f7x3b9k2 {
    display: grid;
    place-items: center;
    width: 39px;
    height: 44px;
    border-radius: 13px 13px 17px 17px;
    color: #3e3c20;
    background: repeating-linear-gradient(45deg, transparent 0 9px, #a67a1a25 9px 10px),
      repeating-linear-gradient(-45deg, #ffd33e 0 9px, #a67a1a25 9px 10px);
    position: relative;
    font-size: 26px;
  }
  .f7x3b9k2::before {
    content: "";
    position: absolute;
    width: 21px;
    height: 13px;
    background: #5d7945;
    top: -9px;
    left: 9px;
    clip-path: polygon(0 0, 35% 20%, 50% 0, 65% 20%, 100% 0, 78% 100%, 20% 100%);
  }
  .h3t9v5q7 {
    display: flex;
    gap: 29px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
  }
  .h3t9v5q7 a {
    position: relative;
    padding-block: 31px;
  }
  .h3t9v5q7 a::after {
    position: absolute;
    content: "";
    bottom: 22px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sun);
    transform: scaleX(0);
    transition: transform 0.2s;
  }
  .h3t9v5q7 a:hover::after,
  .h3t9v5q7 a[aria-current]::after {
    transform: scaleX(1);
  }
  [data-head-actions] {
    display: flex;
    align-items: center;
    gap: 17px;
  }
  [data-head-actions] .y6r2c8v4 {
    font-size: 12px;
    padding: 11px 19px;
    gap: 8px;
  }
  .g8n2j6p4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 8px 0 8px 8px;
  }
  .g8n2j6p4 > span:first-child {
    font-size: 19px;
  }
  .k2w6y8d4 {
    border-top: 1px solid var(--line);
    padding-block: 22px;
    box-shadow: 0 18px 25px #302d1810;
  }
  .k2w6y8d4 > div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    font-size: 13px;
  }
  .k2w6y8d4 a:hover {
    text-decoration: underline;
    text-decoration-color: #c89200;
    text-underline-offset: 5px;
  }
  .x6b2h8r4 {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 28px;
  }
  .x6b2h8r4 .d7k3p9x5 {
    margin-bottom: 10px;
    color: var(--soft);
  }
  .x6b2h8r4 > a {
    font-size: 12px;
    white-space: nowrap;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ink);
  }
  .x6b2h8r4 h2 + p {
    font-size: 13px;
    color: var(--soft);
    margin-top: 11px;
  }
  .y8c4r6m2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 318px;
    gap: 48px;
    padding-block: 80px;
  }
  [data-footer] {
    color: #eeece0;
    background: #25261f;
    padding-top: 58px;
  }
  [data-about] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    padding-bottom: 34px;
  }
  [data-about] h2 {
    font-size: 12px;
    letter-spacing: 0.12em;
    margin-top: 25px;
    color: #bdbeb0;
  }
  [data-about] p {
    color: #c3c4b5;
    font-size: 13px;
    line-height: 2.1;
  }
  [data-footer-map] {
    display: flex;
    gap: 42px;
    border-block: 1px solid #4c4d41;
    padding-block: 25px;
    font-size: 12px;
  }
  [data-footer-map] strong {
    white-space: nowrap;
    color: var(--sun);
  }
  [data-footer-map] > div {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 25px;
  }
  [data-footer] a:hover {
    color: var(--sun);
  }
  [data-copyright] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 23px;
    font-size: 11px;
    color: #babcae;
  }
}
@layer cinema {
  .s3m7w2q9 {
    background: radial-gradient(ellipse at 85% 4%, #ffe991 0, #fff6d0 33%, transparent 65%), #fffbee;
    border-bottom: 1px solid #e8e0c8;
    overflow: hidden;
  }
  [data-opening-grid] {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 48px;
    align-items: center;
    padding-block: 54px 38px;
  }
  .q8f4j6r2 {
    padding-bottom: 5px;
  }
  .q8f4j6r2 > .d7k3p9x5 {
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.05em;
  }
  .q8f4j6r2 > .d7k3p9x5 > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c99200;
    box-shadow: 0 0 0 4px #eab61120;
  }
  h1 {
    font-size: 19px;
    margin-top: 24px;
    line-height: 1.5;
  }
  h1 a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  h1 img {
    width: 28px;
    height: 31px;
    border-radius: 8px;
  }
  .t2x6v9c3 {
    font-size: clamp(38px, 4.2vw, 63px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -0.065em;
    margin-top: 8px;
    position: relative;
  }
  .t2x6v9c3 span {
    position: relative;
    z-index: 1;
  }
  .t2x6v9c3 span::after {
    content: "";
    position: absolute;
    inset: 68% -3px 3px -3px;
    z-index: -1;
    background: var(--sun);
    transform: rotate(-2deg);
  }
  .t2x6v9c3 i {
    display: inline-block;
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    color: #b17d00;
    transform: rotate(10deg);
    margin-left: 10px;
  }
  [data-subtitle] {
    margin-top: 20px;
    font-weight: 700;
    font-size: 16px;
  }
  .b9p3d7n5 {
    color: var(--soft);
    font-size: 13px;
    line-height: 1.9;
    margin-top: 12px;
  }
  [data-hero-actions] {
    display: flex;
    gap: 12px;
    margin-top: 25px;
  }
  [data-hero-actions] .y6r2c8v4,
  [data-hero-actions] .n8z4h6t2 {
    font-size: 13px;
    padding: 13px 19px;
    gap: 12px;
  }
  [data-hero-actions] + p {
    margin-top: 16px;
  }
  [data-opening-foot] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 28px;
    font-size: 11px;
    color: #79745d;
  }
  [data-opening-foot] span + span::before {
    content: "/";
    margin-right: 20px;
    color: #c3b995;
  }
  [data-opening-foot] span:last-child::before {
    content: none;
  }
  .r4h8k2w6 {
    border: 1px solid #c4ba98;
    background: #25261f;
    color: #fff9df;
    border-radius: 14px;
    padding: 11px;
    box-shadow: 12px 14px 0 #dfbe4829;
    transform: rotate(1deg);
    min-width: 0;
  }
  [data-film-top] {
    display: flex;
    justify-content: space-between;
    padding: 0 5px 9px;
    color: #ded9bb;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  [data-film-window] {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1.28;
    background: #63766a;
  }
  .z7c3m5f9 {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .z7c3m5f9:not([hidden]) {
    animation: k3x7n2w9 0.65s both;
  }
  .z7c3m5f9 img {
    transition: transform 6s ease;
  }
  .r4h8k2w6:hover .z7c3m5f9 img {
    transform: scale(1.045);
  }
  .z7c3m5f9::after {
    content: "";
    position: absolute;
    inset: 25% 0 0;
    background: linear-gradient(transparent, #121b20ed);
    pointer-events: none;
  }
  .e5v9q3b7 {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 28px;
    right: 28px;
  }
  .e5v9q3b7 .a2j6m8q4 {
    font-size: 10px;
    border-color: #f0ecc577;
    color: #fff0ad;
    background: #28271b75;
    padding: 3px 9px;
  }
  .e5v9q3b7 h2 {
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 800;
    margin-top: 8px;
    letter-spacing: 0.015em;
  }
  .e5v9q3b7 p {
    font-size: 12px;
    color: #f2efe1;
    margin-top: 4px;
  }
  .e5v9q3b7 button {
    border-bottom: 1px solid #ffdc63aa;
    color: #ffe27c;
    padding: 8px 0 3px;
    font-size: 12px;
    margin-top: 7px;
  }
  [data-film-stamp] {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: 19px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #ffda4e;
    color: #383324;
    border: 1px dashed #79641e;
    outline: 4px solid #ffda4e;
    text-align: center;
    padding-top: 17px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    transform: rotate(12deg);
  }
  .j9n5t3x7 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px 0;
  }
  [data-slide-dots],
  [data-slide-arrows] {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  [data-slide-dots] button {
    padding: 3px 8px;
    font:
      11px ui-monospace,
      monospace;
    color: #d5d1b8;
    border-bottom: 2px solid transparent;
  }
  [data-slide-dots] button[aria-pressed="true"] {
    color: var(--sun);
    border-color: var(--sun);
  }
  [data-slide-arrows] button {
    font-size: 14px;
    line-height: 1.5;
  }
  [data-slide-arrows] button[data-pause] {
    font-size: 10px;
    color: #dfdccb;
  }
  .m4k8v6q2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding-block: 19px 23px;
    border-top: 1px solid #ded5b6;
    font-size: 12px;
  }
  .m4k8v6q2 > span {
    color: #696348;
  }
  .m4k8v6q2 a {
    padding: 5px 0;
    font-weight: 600;
  }
  .m4k8v6q2 a:hover {
    color: #926600;
  }
  @keyframes k3x7n2w9 {
    from {
      opacity: 0;
      transform: scale(1.03);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}
@layer shelves {
  [data-pick-list] {
    display: grid;
    gap: 18px;
  }
  .w2f6p8d4 {
    overflow: hidden;
  }
  .w2f6p8d4 .f3k7x9n5 {
    position: relative;
    overflow: hidden;
    background: #d5d8c7;
  }
  .w2f6p8d4 img {
    transition: transform 0.5s;
  }
  .w2f6p8d4:hover img {
    transform: scale(1.045);
  }
  .f3k7x9n5 > span {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #fffdf0ed;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 10px;
    color: #383a30;
  }
  [data-pick] {
    display: grid;
    grid-template-columns: 37% 1fr;
    min-height: 204px;
    background: #f4f1e8;
    border: 1px solid #e6e1d3;
    border-radius: 12px;
  }
  [data-pick] .n6r2v8c4 {
    padding: 20px 24px;
  }
  [data-pick] .d7k3p9x5 {
    color: #8a6b20;
    font-size: 9px;
    margin-bottom: 5px;
  }
  [data-pick] .n6r2v8c4 > p:not(.d7k3p9x5) {
    font-size: 12px;
    line-height: 1.8;
    color: var(--soft);
    margin-top: 8px;
  }
  .n6r2v8c4 button {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #c8bea4;
    padding: 8px 0 4px;
    margin-top: 5px;
  }
  .n6r2v8c4 button:hover {
    color: #916400;
  }
  [data-pick-list] + p {
    margin-top: 15px;
    font-size: 10px;
  }
  [data-ranking] {
    background: #fff4c6;
    border-radius: 14px;
    overflow: hidden;
    padding: 24px;
    align-self: start;
    border: 1px solid #ebdda4;
  }
  [data-chart-head] .d7k3p9x5 {
    font-size: 9px;
    color: #7b681f;
  }
  [data-chart-head] h2 {
    font-size: 25px;
    margin-block: 7px 3px;
    display: flex;
    justify-content: space-between;
  }
  [data-chart-head] h2 span {
    color: #967019;
  }
  [data-chart-head] > p:last-child {
    color: #7b7050;
    font-size: 11px;
  }
  [data-ranking] ol {
    list-style: none;
    margin: 17px 0 0;
    padding: 0;
  }
  [data-ranking] li {
    border-top: 1px solid #e0d398;
  }
  [data-ranking] li button {
    display: grid;
    grid-template-columns: 33px 1fr 14px;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 16px 0;
    align-items: center;
  }
  [data-ranking] li button > span:first-child {
    font-size: 24px;
    font-weight: 800;
    color: #8b6a22;
    font-style: italic;
    line-height: 1;
  }
  [data-ranking] li:first-child button > span:first-child {
    color: #9e5000;
  }
  [data-ranking] strong {
    font-size: 13px;
    font-weight: 700;
  }
  [data-ranking] small {
    display: block;
    font-size: 10px;
    margin-top: 3px;
    color: #786a41;
  }
  [data-ranking] button:hover strong {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  [data-ranking] aside {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px dashed #cabc7b;
    font-size: 10px;
    color: #75683f;
  }
  [data-ranking] aside > span {
    font-size: 28px;
  }
  [data-library] {
    padding-block: 80px;
  }
  [data-library] .a2j6m8q4 {
    color: #766746;
    border-color: #d1c8aa;
    margin-bottom: 6px;
  }
  [data-filter-bar] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  [data-filter-bar] [role="group"] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
  }
  [data-filter] {
    padding: 8px 17px;
    font-size: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
  }
  [data-filter][aria-pressed="true"] {
    background: var(--sun);
    font-weight: 700;
  }
  [data-filter]:hover {
    border-color: #c5b04f;
  }
  [data-filter] > span {
    font-size: 9px;
    margin-left: 5px;
  }
  [data-filter-status] {
    color: var(--soft);
    font-size: 11px;
  }
  [data-library-grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 26px;
  }
  [data-work] {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 2px #76653104;
  }
  [data-work] .f3k7x9n5 {
    aspect-ratio: 1.25;
  }
  [data-work] .f3k7x9n5 > button {
    position: absolute;
    right: 13px;
    bottom: 13px;
    width: 32px;
    height: 32px;
    background: var(--sun);
    border-radius: 50%;
    font-size: 20px;
  }
  [data-work] .n6r2v8c4 {
    padding: 20px 22px 21px;
  }
  [data-work] small {
    font-size: 9px;
    letter-spacing: 0.08em;
    color: #817962;
  }
  [data-work] h3 {
    margin-top: 5px;
  }
  [data-work] .n6r2v8c4 > p {
    font-size: 12px;
    color: var(--soft);
    margin-block: 9px 10px;
    line-height: 1.85;
  }
  [data-work] .n6r2v8c4 button {
    width: 100%;
    border-color: var(--line);
    font-size: 11px;
  }
}
@layer details {
  [data-features] {
    background: #292b23;
    color: #f4f2e6;
    padding-block: 54px;
  }
  [data-features] .d7k3p9x5 {
    color: #bdbba8;
  }
  [data-features] h2 {
    font-size: 29px;
  }
  [data-features] h2 > span {
    color: #ffde63;
  }
  [data-feature-caption] {
    color: #b7b8a9;
    font-size: 11px;
  }
  [data-feature-grid] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  [data-feature-grid] article {
    position: relative;
    padding: 22px 20px 0 0;
    border-top: 1px solid #66674e;
  }
  [data-feature-symbol] {
    display: inline-grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    background: #454735;
    color: #ffde63;
    font-size: 23px;
  }
  [data-feature-symbol] + span {
    float: right;
    font:
      11px ui-monospace,
      monospace;
    color: #afad94;
  }
  [data-feature-grid] h3 {
    font-size: 16px;
    margin-top: 17px;
  }
  [data-feature-grid] p {
    font-size: 11px;
    color: #c0c1b2;
    margin-top: 9px;
    line-height: 1.9;
  }
  [data-experience] {
    background: #fff1b2;
    border-block: 1px solid #ebdda7;
    overflow: hidden;
  }
  [data-experience-grid] {
    min-height: 562px;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 100px;
    padding-block: 55px;
  }
  [data-experience] h2 {
    font-size: clamp(30px, 3vw, 43px);
    margin-top: 15px;
    line-height: 1.5;
  }
  [data-experience] h2 span {
    font-weight: 800;
  }
  [data-experience-grid] > div > p:not(.d7k3p9x5):not(.b6n2h8r4) {
    font-size: 13px;
    color: #6e6445;
    max-width: 390px;
    margin-top: 17px;
    line-height: 1.9;
  }
  [data-device-buttons] {
    display: inline-flex;
    border: 1px solid #c9b96e;
    border-radius: 7px;
    padding: 4px;
    gap: 4px;
    margin-top: 24px;
  }
  [data-device-buttons] button {
    border-radius: 4px;
    padding: 7px 15px;
    font-size: 12px;
  }
  [data-device-buttons] button[aria-pressed="true"] {
    color: #fff9dc;
    background: #333626;
  }
  [data-device-buttons] + p {
    margin-top: 11px;
    font-size: 10px;
    color: #786e4b;
  }
  [data-experience] .n8z4h6t2 {
    margin-top: 20px;
    font-size: 12px;
    padding: 10px 18px;
    border-color: #c8b76d;
  }
  [data-device-frame] {
    width: 276px;
    margin-inline: auto;
    border: 8px solid #36392e;
    border-bottom-width: 24px;
    border-radius: 35px;
    background: #fffdf6;
    box-shadow:
      22px 22px 0 #b39b3b24,
      0 15px 30px #59491520;
    position: relative;
    transition:
      width 0.35s,
      border-radius 0.35s;
  }
  [data-device-top] {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 22px;
    color: #807e6e;
    padding: 0 13px;
    font-size: 7px;
  }
  [data-device-top] > span:first-child {
    color: #c1aa4d;
    font-size: 7px;
    letter-spacing: 1px;
  }
  [data-device-screen] {
    padding: 0 9px 10px;
  }
  [data-mini-nav] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    padding: 0 5px 10px;
  }
  [data-mini-cover] {
    position: relative;
    aspect-ratio: 0.93;
    overflow: hidden;
    border-radius: 8px;
  }
  [data-mini-cover]::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent, #263d3ed9);
  }
  [data-mini-cover] > span,
  [data-mini-cover] > strong {
    position: absolute;
    z-index: 1;
    left: 15px;
    color: white;
  }
  [data-mini-cover] > span {
    bottom: 50px;
    font-size: 9px;
  }
  [data-mini-cover] > strong {
    bottom: 17px;
    font-size: 24px;
  }
  [data-mini-bottom] {
    padding: 13px 5px 6px;
    font-size: 7px;
  }
  [data-mini-bottom] span {
    display: inline-block;
    padding: 3px 7px;
    border: 1px solid #d8c980;
    border-radius: 3px;
    margin-right: 4px;
    background: #fff6c9;
  }
  [data-mini-bottom] p {
    margin-top: 9px;
    font-size: 9px;
  }
  [data-device-frame] figcaption {
    position: absolute;
    bottom: -58px;
    left: 50%;
    transform: translateX(-50%);
    width: 330px;
    text-align: center;
    font-size: 10px;
    color: #756940;
  }
  [data-device-frame][data-mode="desktop"] {
    width: 100%;
    max-width: 485px;
    border-radius: 13px;
    border-bottom-width: 15px;
  }
  [data-mode="desktop"] [data-device-screen] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 10px;
  }
  [data-mode="desktop"] [data-mini-nav] {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }
  [data-mode="desktop"] [data-mini-cover] {
    aspect-ratio: 1.05;
  }
  [data-mode="desktop"] [data-mini-bottom] {
    align-self: end;
    padding-bottom: 20px;
  }
  [data-mode="desktop"] [data-mini-bottom] span {
    margin-top: 7px;
    font-size: 8px;
  }
  [data-guide] {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 90px;
    padding-block: 80px;
  }
  [data-guide] h2 {
    margin-top: 13px;
    font-size: 37px;
  }
  [data-guide] h2 span {
    font-weight: 800;
  }
  [data-guide] > div > p:last-child {
    font-size: 12px;
    color: var(--soft);
    margin-top: 17px;
  }
  [data-guide] ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  [data-guide] li {
    display: flex;
    align-items: start;
    gap: 24px;
    padding-block: 20px;
    border-bottom: 1px solid var(--line);
  }
  [data-guide] li:first-child {
    padding-top: 0;
  }
  [data-guide] li > span {
    font-size: 29px;
    color: #8e7b3a;
    font-weight: 700;
    font-style: italic;
    line-height: 1.5;
  }
  [data-guide] h3 {
    font-size: 17px;
  }
  [data-guide] li p {
    font-size: 12px;
    color: var(--soft);
    margin-top: 5px;
  }
  [data-guide] li a,
  [data-guide] li button {
    display: inline-block;
    font-size: 11px;
    padding: 7px 0 0;
    font-weight: 700;
  }
  [data-reviews] {
    background: #f4f2e9;
    padding-block: 55px;
    border-block: 1px solid var(--line);
  }
  [data-reviews] .x6b2h8r4 > p {
    font-size: 10px;
    text-align: right;
    color: var(--soft);
  }
  [data-review-grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }
  [data-review-grid] figure {
    border-top: 1px solid #c9c5b3;
    padding-top: 12px;
  }
  [data-review-grid] figure > span {
    font:
      50px Georgia,
      serif;
    color: #a38b30;
    line-height: 1;
  }
  [data-review-grid] blockquote {
    font-size: 12px;
    line-height: 2;
    min-height: 84px;
  }
  [data-review-grid] figcaption {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    font-size: 11px;
  }
  [data-review-grid] figcaption > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: #e8dfb6;
    border-radius: 50%;
  }
  [data-review-grid] small {
    display: block;
    font-size: 8px;
    color: var(--soft);
    margin-top: 2px;
  }
  [data-review-grid] b {
    font-size: 8px;
    font-weight: 400;
    margin-left: auto;
    color: #766b48;
    border: 1px solid #cbbf9a;
    border-radius: 4px;
    padding: 2px 5px;
  }
  [data-help-grid] {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 95px;
    padding-block: 80px;
    align-items: start;
  }
  #questions h2 {
    margin-block: 12px 24px;
  }
  [data-faq] details {
    border-bottom: 1px solid var(--line);
  }
  [data-faq] summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-block: 20px;
    font-size: 13px;
    font-weight: 600;
  }
  [data-faq] summary::-webkit-details-marker {
    display: none;
  }
  [data-faq] summary > span {
    font-size: 20px;
    font-weight: 400;
    transition: transform 0.2s;
  }
  [data-faq] details[open] summary > span {
    transform: rotate(45deg);
  }
  [data-faq] details p {
    font-size: 12px;
    color: var(--soft);
    padding-bottom: 20px;
    line-height: 1.9;
    max-width: 93%;
  }
  [data-download] {
    background: linear-gradient(145deg, #ffe688, #ffdb4c);
    padding: 31px;
    border: 1px solid #ebc954;
    border-radius: 17px;
    position: relative;
  }
  [data-download-icon] {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border-radius: 12px;
    border: 1px solid #bda139;
    font-size: 26px;
    margin-bottom: 23px;
  }
  [data-download] .d7k3p9x5 {
    font-size: 8px;
    color: #76612b;
  }
  [data-download] h2 {
    font-size: 34px;
    margin-block: 13px 11px;
    line-height: 1.4;
  }
  [data-download] h2 > span {
    font-weight: 800;
  }
  [data-download] h2 + p {
    font-size: 13px;
    color: #615733;
  }
  [data-download-state] {
    border-top: 1px dashed #b99a42;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 24px;
    padding-top: 18px;
    font-size: 12px;
    font-weight: 600;
  }
  [data-download-state] > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8c6500;
  }
  [data-download] .b6n2h8r4 {
    font-size: 10px;
    color: #6a5d34;
    margin-top: 9px;
  }
  [data-download] .y6r2c8v4 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 13px 18px;
    margin-top: 20px;
    background: linear-gradient(100deg, #3c3e2f, #25271f);
    color: #ffedb4;
  }
  [data-download] > a:last-child {
    display: block;
    text-align: center;
    font-size: 11px;
    margin-top: 12px;
  }
  dialog {
    width: min(580px, calc(100% - 32px));
    padding: 28px;
    border: 1px solid #c9c2a4;
    border-radius: 18px;
    color: var(--ink);
    background: var(--paper);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    box-shadow: 0 30px 100px #0004;
  }
  dialog::backdrop {
    background: #181e1caa;
    backdrop-filter: blur(4px);
  }
  [data-dialog-bar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 24px;
    font-size: 11px;
    color: var(--soft);
  }
  [data-close-dialog]:not(.y6r2c8v4) {
    font-size: 26px;
    line-height: 1;
    padding: 3px 8px;
  }
  dialog h2 {
    font-size: 30px;
    margin-block: 10px 16px;
  }
  [data-story-synopsis],
  dialog aside p {
    font-size: 14px;
    line-height: 2;
  }
  dialog aside {
    background: #fff1b4;
    border-left: 3px solid #c59a19;
    padding: 17px 20px;
    margin-block: 22px;
  }
  dialog h3 {
    font-size: 15px;
    margin-bottom: 5px;
  }
  dialog .y6r2c8v4 {
    margin-top: 20px;
    font-size: 12px;
  }
  [data-no-script] {
    padding: 20px;
    background: var(--lemon);
    font-size: 13px;
  }
}
@layer adaptive {
  @media (min-width: 1600px) {
    .a8m4q7v2 {
      width: min(1400px, calc(100% - 150px));
    }
    [data-opening-grid] {
      gap: 70px;
    }
  }
  @media (max-width: 1160px) {
    .a8m4q7v2 {
      width: calc(100% - 64px);
    }
    .h3t9v5q7 {
      gap: 18px;
      font-size: 12px;
    }
    .p6d2w8n4 {
      font-size: 21px;
    }
    [data-masthead] {
      gap: 18px;
    }
    [data-opening-grid] {
      gap: 25px;
    }
    .t2x6v9c3 {
      font-size: 48px;
    }
    .y8c4r6m2 {
      gap: 30px;
      grid-template-columns: minmax(0, 1fr) 290px;
    }
    [data-pick] .n6r2v8c4 {
      padding: 16px 18px;
    }
    [data-pick] h3 {
      font-size: 18px;
    }
    [data-help-grid] {
      gap: 50px;
    }
    [data-experience-grid] {
      gap: 55px;
    }
    [data-guide] {
      gap: 50px;
    }
  }
  @media (max-width: 940px) {
    .h3t9v5q7 {
      display: none;
    }
    [data-masthead] {
      min-height: 76px;
    }
    [data-opening-grid] {
      padding-top: 36px;
      gap: 24px;
    }
    .t2x6v9c3 {
      font-size: 41px;
    }
    .t2x6v9c3 i {
      font-size: 28px;
    }
    [data-hero-actions] {
      flex-wrap: wrap;
      gap: 9px;
    }
    [data-hero-actions] .y6r2c8v4,
    [data-hero-actions] .n8z4h6t2 {
      padding: 10px 13px;
      font-size: 11px;
    }
    .q8f4j6r2 > .d7k3p9x5 {
      font-size: 9px;
    }
    [data-subtitle] {
      font-size: 13px;
    }
    .b9p3d7n5 {
      font-size: 11px;
    }
    [data-opening-foot] {
      gap: 10px;
      font-size: 9px;
      margin-top: 20px;
    }
    [data-opening-foot] span + span::before {
      margin-right: 10px;
    }
    [data-film-window] {
      aspect-ratio: 0.85;
    }
    .e5v9q3b7 {
      left: 19px;
      right: 19px;
      bottom: 21px;
    }
    .e5v9q3b7 h2 {
      font-size: 29px;
    }
    [data-film-stamp] {
      width: 63px;
      height: 63px;
      font-size: 10px;
      padding-top: 15px;
    }
    .m4k8v6q2 {
      gap: 12px;
      flex-wrap: wrap;
      font-size: 11px;
    }
    .m4k8v6q2 > span {
      width: 100%;
    }
    .y8c4r6m2 {
      gap: 25px;
      grid-template-columns: minmax(0, 1fr) 260px;
      padding-block: 55px;
    }
    [data-pick] {
      grid-template-columns: 32% 1fr;
    }
    [data-pick] .n6r2v8c4 {
      padding: 16px;
    }
    .x6b2h8r4 {
      flex-wrap: wrap;
      gap: 12px;
    }
    .x6b2h8r4 h2 {
      font-size: 26px;
    }
    [data-ranking] {
      padding: 20px;
    }
    [data-feature-grid] {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 30px;
    }
    [data-feature-grid] p {
      font-size: 12px;
    }
    [data-library-grid] {
      gap: 22px 18px;
    }
    [data-work] h3 {
      font-size: 17px;
    }
    [data-work] .n6r2v8c4 {
      padding: 15px;
    }
    [data-experience-grid] {
      gap: 35px;
      padding-bottom: 75px;
    }
    [data-review-grid] {
      gap: 23px;
    }
    [data-review-grid] figcaption {
      flex-wrap: wrap;
    }
    [data-review-grid] b {
      margin-left: 43px;
    }
    [data-about] {
      grid-template-columns: 240px 1fr;
      gap: 30px;
    }
    [data-copyright] > span {
      display: none;
    }
  }
  @media (max-width: 700px) {
    html {
      scroll-padding-top: 91px;
    }
    .a8m4q7v2 {
      width: calc(100% - 36px);
    }
    [data-masthead] {
      min-height: 73px;
      gap: 12px;
    }
    .p6d2w8n4 {
      font-size: 21px;
      gap: 9px;
    }
    .p6d2w8n4 small {
      font-size: 6px;
    }
    .f7x3b9k2 {
      width: 31px;
      height: 36px;
      font-size: 22px;
      border-radius: 9px 9px 12px 12px;
    }
    .f7x3b9k2::before {
      width: 18px;
      height: 10px;
      left: 7px;
      top: -7px;
    }
    [data-head-actions] {
      gap: 11px;
    }
    [data-head-actions] .y6r2c8v4 {
      padding: 8px 11px;
      font-size: 10px;
      gap: 5px;
    }
    .g8n2j6p4 {
      font-size: 10px;
      padding-left: 0;
      gap: 3px;
    }
    .g8n2j6p4 > span:first-child {
      font-size: 16px;
    }
    .k2w6y8d4 {
      max-height: calc(100dvh - 75px);
      overflow: auto;
    }
    .k2w6y8d4 > div {
      grid-template-columns: repeat(3, 1fr);
      font-size: 11px;
      gap: 15px 12px;
    }
    [data-opening-grid] {
      grid-template-columns: 1fr;
      padding-block: 30px;
      gap: 28px;
    }
    .q8f4j6r2 > .d7k3p9x5 {
      font-size: 10px;
    }
    h1 {
      margin-top: 18px;
      font-size: 16px;
    }
    h1 img {
      width: 24px;
      height: 28px;
    }
    .t2x6v9c3 {
      font-size: clamp(38px, 10.8vw, 61px);
      line-height: 1.28;
      letter-spacing: -0.06em;
      margin-top: 8px;
    }
    .t2x6v9c3 i {
      font-size: 32px;
      margin-left: 12px;
    }
    [data-subtitle] {
      font-size: 14px;
      margin-top: 16px;
    }
    .b9p3d7n5 {
      font-size: 12px;
      line-height: 1.9;
      margin-top: 9px;
    }
    [data-hero-actions] {
      margin-top: 19px;
    }
    [data-hero-actions] .y6r2c8v4,
    [data-hero-actions] .n8z4h6t2 {
      padding: 12px 16px;
      font-size: 12px;
    }
    [data-hero-actions] + p {
      font-size: 10px;
      margin-top: 11px;
    }
    [data-opening-foot] {
      display: none;
    }
    .r4h8k2w6 {
      transform: rotate(0.6deg);
      padding: 9px;
      box-shadow: 6px 7px 0 #dfbe4829;
    }
    [data-film-window] {
      aspect-ratio: 1.18;
    }
    [data-film-top] {
      font-size: 8px;
    }
    .e5v9q3b7 h2 {
      font-size: 32px;
    }
    .e5v9q3b7 p {
      font-size: 11px;
      max-width: 250px;
    }
    .e5v9q3b7 button {
      font-size: 11px;
    }
    [data-film-stamp] {
      top: 16px;
      right: 16px;
    }
    .m4k8v6q2 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px 9px;
      padding-block: 15px 20px;
    }
    .m4k8v6q2 > span {
      grid-column: 1 / -1;
      font-size: 10px;
    }
    .m4k8v6q2 a {
      font-size: 10px;
      text-align: center;
      border: 1px solid #dcd0a3;
      border-radius: 5px;
      padding: 7px 0;
    }
    .m4k8v6q2 a:last-child {
      grid-column: 1 / -1;
      border: 0;
      text-align: left;
      font-size: 10px;
      padding-top: 6px;
    }
    .y8c4r6m2 {
      grid-template-columns: 1fr;
      gap: 35px;
      padding-block: 42px;
    }
    .x6b2h8r4 {
      margin-bottom: 22px;
    }
    .x6b2h8r4 h2 {
      font-size: 25px;
    }
    .x6b2h8r4 .d7k3p9x5 {
      font-size: 9px;
      margin-bottom: 7px;
    }
    .x6b2h8r4 > a {
      font-size: 10px;
    }
    [data-pick] {
      min-height: 185px;
      grid-template-columns: 34% 1fr;
    }
    [data-pick] .n6r2v8c4 {
      padding: 15px;
    }
    [data-pick] h3 {
      font-size: 18px;
    }
    [data-pick] .n6r2v8c4 > p:not(.d7k3p9x5) {
      font-size: 11px;
      line-height: 1.8;
    }
    [data-pick] .d7k3p9x5 {
      font-size: 8px;
    }
    .f3k7x9n5 > span {
      left: 8px;
      bottom: 8px;
      font-size: 8px;
      padding: 3px 6px;
    }
    [data-pick-list] + p {
      font-size: 9px;
    }
    [data-ranking] {
      padding: 23px;
    }
    [data-ranking] li button {
      grid-template-columns: 35px 1fr 20px;
      padding-block: 14px;
    }
    [data-ranking] strong {
      font-size: 14px;
    }
    [data-ranking] small {
      font-size: 11px;
    }
    [data-ranking] aside {
      font-size: 11px;
    }
    [data-features] {
      padding-block: 37px;
    }
    [data-features] h2 {
      font-size: 24px;
      max-width: 330px;
    }
    [data-feature-caption] {
      font-size: 10px;
    }
    [data-feature-grid] {
      gap: 24px 20px;
    }
    [data-feature-grid] article {
      padding-right: 0;
      padding-top: 18px;
    }
    [data-feature-grid] h3 {
      font-size: 14px;
      margin-top: 13px;
    }
    [data-feature-grid] p {
      font-size: 11px;
    }
    [data-library] {
      padding-block: 42px;
    }
    [data-library] .a2j6m8q4 {
      font-size: 9px;
    }
    [data-filter-bar] {
      display: block;
      margin-bottom: 20px;
      padding-bottom: 12px;
    }
    [data-filter-bar] [role="group"] {
      gap: 2px;
    }
    [data-filter] {
      font-size: 10px;
      padding: 7px 10px;
    }
    [data-filter-status] {
      font-size: 9px;
      margin-top: 9px;
    }
    [data-library-grid] {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px 12px;
    }
    [data-work] {
      border-radius: 9px;
    }
    [data-work] .f3k7x9n5 {
      aspect-ratio: 0.88;
    }
    [data-work] .n6r2v8c4 {
      padding: 13px 11px;
    }
    [data-work] small {
      font-size: 7px;
      letter-spacing: 0.015em;
    }
    [data-work] h3 {
      font-size: 15px;
      line-height: 1.5;
    }
    [data-work] .n6r2v8c4 > p {
      font-size: 10px;
      line-height: 1.8;
      margin-block: 7px;
    }
    [data-work] .n6r2v8c4 button {
      font-size: 10px;
    }
    [data-work] .f3k7x9n5 > button {
      right: 8px;
      bottom: 8px;
      width: 25px;
      height: 25px;
      font-size: 16px;
    }
    [data-work] .f3k7x9n5 > span {
      max-width: calc(100% - 45px);
      font-size: 7px;
    }
    [data-experience-grid] {
      grid-template-columns: 1fr;
      gap: 32px;
      min-height: 0;
      padding-block: 37px 77px;
    }
    [data-experience] .d7k3p9x5 {
      font-size: 9px;
    }
    [data-experience] h2 {
      font-size: 31px;
      margin-top: 10px;
    }
    [data-experience-grid] > div > p:not(.d7k3p9x5):not(.b6n2h8r4) {
      font-size: 12px;
      margin-top: 13px;
    }
    [data-device-buttons] {
      margin-top: 18px;
    }
    [data-device-frame] {
      width: 252px;
    }
    [data-device-frame][data-mode="desktop"] {
      width: 100%;
    }
    [data-guide] {
      grid-template-columns: 1fr;
      gap: 30px;
      padding-block: 42px;
    }
    [data-guide] h2 {
      font-size: 30px;
      margin-top: 10px;
    }
    [data-guide] h2 br {
      display: none;
    }
    [data-guide] > div > p:last-child {
      margin-top: 11px;
      font-size: 11px;
    }
    [data-guide] li {
      gap: 21px;
      padding-block: 18px;
    }
    [data-guide] h3 {
      font-size: 16px;
    }
    [data-guide] li p {
      font-size: 11px;
    }
    [data-reviews] {
      padding-block: 35px;
    }
    [data-reviews] .x6b2h8r4 > p {
      text-align: left;
      font-size: 9px;
    }
    [data-review-grid] {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    [data-review-grid] blockquote {
      min-height: 0;
      font-size: 12px;
    }
    [data-review-grid] figcaption {
      flex-wrap: nowrap;
      margin-top: 13px;
    }
    [data-review-grid] b {
      margin-left: auto;
    }
    [data-help-grid] {
      grid-template-columns: 1fr;
      gap: 35px;
      padding-block: 42px;
    }
    #questions .d7k3p9x5 {
      font-size: 9px;
    }
    #questions h2 {
      font-size: 27px;
      margin-bottom: 15px;
    }
    [data-faq] summary {
      font-size: 12px;
      padding-block: 17px;
    }
    [data-faq] details p {
      font-size: 11px;
    }
    [data-download] {
      padding: 26px;
    }
    [data-download] h2 {
      font-size: 32px;
    }
    [data-download] h2 br {
      display: none;
    }
    [data-download-icon] {
      margin-bottom: 18px;
    }
    [data-download] h2 > span {
      margin-left: 12px;
    }
    [data-download] .b6n2h8r4 {
      font-size: 11px;
    }
    [data-footer] {
      padding-top: 35px;
    }
    [data-about] {
      grid-template-columns: 1fr;
      gap: 20px;
      padding-bottom: 25px;
    }
    [data-about] h2 {
      margin-top: 23px;
    }
    [data-about] p {
      font-size: 11px;
    }
    [data-footer-map] {
      display: block;
      padding-block: 20px;
      font-size: 11px;
    }
    [data-footer-map] > div {
      gap: 10px 20px;
      margin-top: 14px;
    }
    [data-copyright] {
      flex-wrap: wrap;
      gap: 7px;
      font-size: 9px;
      padding-block: 19px;
    }
    dialog {
      padding: 22px;
    }
    dialog h2 {
      font-size: 25px;
    }
    [data-story-synopsis],
    dialog aside p {
      font-size: 12px;
    }
    [data-dialog-bar] {
      font-size: 9px;
    }
    dialog aside {
      padding: 14px 16px;
    }
  }
  @media (max-width: 360px) {
    [data-head-actions] {
      gap: 7px;
    }
    .g8n2j6p4 > span:last-child {
      display: none;
    }
    .p6d2w8n4 {
      font-size: 19px;
    }
    .t2x6v9c3 {
      font-size: 36px;
    }
    .t2x6v9c3 i {
      font-size: 25px;
    }
    [data-filter] {
      padding-inline: 7px;
    }
    [data-work] h3 {
      font-size: 14px;
    }
    [data-download] h2 {
      font-size: 27px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
    [data-reveal][data-pending] {
      opacity: 1;
      transform: none;
    }
  }
}