body { background-color: #FAFAFA; color: #2D3436; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; position: relative; }
    h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }
    .glass-nav { background: rgba(250, 250, 250, 0.95); backdrop-filter: blur(10px); }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .animate-bounce-slow { animation: bounce-slow 2.6s infinite; }
    .nav-main-link { position: relative; display: inline-flex; align-items: center; }
    .nav-main-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -10px;
      width: 100%;
      height: 2px;
      background: #18B8B3;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }
    .nav-main-link.active::after { transform: scaleX(1); }
    .nav-main-link.is-clicked { animation: nav-tap 0.28s ease; }
    @keyframes nav-tap {
      0% { transform: scale(1); }
      45% { transform: scale(0.92); }
      100% { transform: scale(1); }
    }
    .featured-book-stage { background: #e8dccf; }
    .featured-book-image { width: min(72%, 320px); height: auto; max-height: 420px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,0.22)); }
    .landing-ambient {
      position: absolute;
      inset: 78px 0 auto;
      height: min(1100px, 122vw);
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .landing-ambient::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 360px at 86% 15%, rgba(74,168,160,0.16) 0%, rgba(74,168,160,0.04) 55%, rgba(74,168,160,0) 100%),
        radial-gradient(560px 250px at 18% 24%, rgba(111,183,176,0.11) 0%, rgba(111,183,176,0.02) 62%, rgba(111,183,176,0) 100%),
        linear-gradient(rgba(45,52,54,0.062) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,52,54,0.062) 1px, transparent 1px),
        linear-gradient(rgba(45,52,54,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,52,54,0.018) 1px, transparent 1px),
        linear-gradient(180deg, #f6efe4 0%, #f2e9dc 52%, #f7efe4 100%);
      background-size: auto, auto, 44px 44px, 44px 44px, 11px 11px, 11px 11px, auto;
      background-position: center, center, center, center, center, center, center;
      clip-path: polygon(0 0, 100% 0, 100% 58%, 93% 69%, 87% 79%, 80% 87%, 68% 94%, 48% 98%, 26% 100%, 0 96%);
    }
    .landing-ambient::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(250,250,250,0) 0%, rgba(250,250,250,0.14) 60%, rgba(250,250,250,0.84) 93%, #fafafa 100%),
        radial-gradient(600px 190px at 84% 62%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 100%);
    }
    .ambient-curve,
    .ambient-orb {
      position: absolute;
      border-radius: 999px;
    }
    .ambient-curve {
      right: -170px;
      bottom: -200px;
      width: 760px;
      height: 430px;
      opacity: 0.42;
      background: radial-gradient(76% 74% at 42% 44%, rgba(250,251,250,0.98), rgba(244,248,247,0.74) 61%, rgba(244,248,247,0.08) 100%);
      transform: rotate(-13deg);
      border: 1px solid rgba(111, 183, 176, 0.22);
    }
    .ambient-orb-1 {
      left: -90px;
      top: 110px;
      width: 240px;
      height: 150px;
      opacity: 0.36;
      background: radial-gradient(circle at 40% 40%, rgba(111,183,176,0.22), rgba(111,183,176,0));
    }
    .ambient-orb-2 {
      right: 14%;
      top: 84px;
      width: 220px;
      height: 140px;
      opacity: 0.42;
      background: radial-gradient(circle at 50% 50%, rgba(74,168,160,0.2), rgba(74,168,160,0));
    }
    .ambient-layer {
      position: relative;
      z-index: 1;
      background: transparent !important;
      border-color: transparent !important;
    }
    .hero-copy-panel {
      position: relative;
      isolation: isolate;
      padding: 18px 0;
    }
    .hero-logo-watermark {
      position: absolute;
      left: -22px;
      top: 10px;
      width: min(520px, 96%);
      max-width: 520px;
      height: auto;
      object-fit: contain;
      object-position: left center;
      opacity: 0.18;
      pointer-events: none;
      z-index: 0;
      filter: saturate(0.9) contrast(1.02);
    }
    .hero-copy-panel > :not(.hero-logo-watermark) {
      position: relative;
      z-index: 1;
    }
    .trending-rail { position: relative; }
    .trending-track {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 4px 44px 8px 2px;
    }
    .trending-card {
      position: relative;
      flex: 0 0 128px;
      width: 128px;
      height: 188px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      background: #f4f4f5;
      box-shadow: 0 8px 16px rgba(17, 24, 39, 0.12);
      scroll-snap-align: start;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .trending-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 24px rgba(17, 24, 39, 0.18);
    }
    .trending-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .trending-rank-badge {
      position: absolute;
      left: 8px;
      top: 8px;
      min-width: 26px;
      height: 22px;
      border-radius: 999px;
      padding: 0 7px;
      background: rgba(17, 24, 39, 0.78);
      color: #f9fafb;
      font-size: 11px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(2px);
    }
    .trending-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid #e5e7eb;
      background: rgba(255, 255, 255, 0.95);
      color: #4b5563;
      box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .trending-nav-btn:hover {
      color: #18B8B3;
      border-color: #fed7aa;
    }
    .trending-nav-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .trending-nav-prev { left: -10px; }
    .trending-nav-next { right: -10px; }
    .preview-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .preview-modal.hidden { display: none; }
    .preview-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 18, 20, 0.62);
      backdrop-filter: blur(3px);
    }
    .preview-modal-card {
      position: relative;
      width: min(740px, 100%);
      max-height: min(84vh, 780px);
      overflow: hidden;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid rgba(24, 184, 179, 0.24);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
      animation: preview-modal-pop 0.22s ease;
    }
    .preview-scroll {
      max-height: min(54vh, 460px);
      overflow-y: auto;
    }
    .preview-scroll::-webkit-scrollbar { width: 8px; }
    .preview-scroll::-webkit-scrollbar-thumb {
      background: rgba(24, 184, 179, 0.34);
      border-radius: 999px;
    }
    @keyframes preview-modal-pop {
      from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @media (max-width: 768px) {
      .landing-ambient {
        inset: 70px 0 auto;
        height: 960px;
      }
      .landing-ambient::before {
        background-size: auto, auto, 38px 38px, 38px 38px, 9px 9px, 9px 9px, auto;
        clip-path: polygon(0 0, 100% 0, 100% 56%, 93% 68%, 85% 81%, 72% 90%, 54% 96%, 30% 100%, 0 96%);
      }
      .ambient-curve {
        right: -250px;
        width: 560px;
        height: 330px;
      }
      .hero-copy-panel {
        padding: 10px 0 0;
      }
      .hero-logo-watermark {
        left: 50%;
        transform: translateX(-50%);
        top: 24px;
        width: min(360px, 92%);
        opacity: 0.14;
        object-position: center;
      }
      .trending-track { padding-right: 8px; }
      .trending-nav-btn { display: none; }
      .trending-card {
        flex-basis: 114px;
        width: 114px;
        height: 170px;
      }
      .preview-modal-card {
        border-radius: 16px;
      }
    }
    @keyframes bounce-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }