/* Global site styles moved here for reuse across pages */

/* Top navigation container: match hero-inner width and padding so logo aligns with hero heading */
nav { display:flex; justify-content:center; }
nav .nav-inner { width:100%; max-width:1200px; display:flex; align-items:center; justify-content:space-between; padding: 0 20px; box-sizing: border-box; }
nav .logo { margin-left: 0; transform: none; }
nav .logo img { max-height:52px; height:auto; display:block; }
nav .nav-links { display:flex; gap:20px; align-items:center; }

@media (max-width: 1100px) {
    /* slightly reduce side padding on narrower screens */
    nav .nav-inner { padding: 0 12px; }
    nav .logo { transform: none; margin-left: 0; }
    nav .logo img { max-height:48px; }
}

/* Nav link base + transitions */
.nav-links a, .footer-nav a, .bottom-footer-links a {
    color: rgba(223,231,255,0.95);
    text-decoration: none;
    transition: color 160ms ease, opacity 160ms ease, transform 120ms ease;
    cursor: pointer;
    background: transparent; /* ensure no background on click */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* fully transparent tap highlight */
}

/* Hover feedback */
.nav-links a:hover, .footer-nav a:hover, .bottom-footer-links a:hover {
    color: rgba(255,102,204,0.5);
    opacity: 1;
    transform: translateY(-1px);
}

/* Active / clicked state (short-lived) */
.nav-link--active {
    color: rgba(255,63,161,0.5) !important;
    transform: scale(0.99);
    transition: color 200ms ease, transform 120ms ease;
}

/* Prevent translucent backgrounds on focus/active for nav links */
.nav-links a:active,
.nav-links a:focus,
.footer-nav a:active,
.footer-nav a:focus,
.bottom-footer-links a:active,
.bottom-footer-links a:focus {
    background: transparent !important;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* Ensure container-level tap highlight is transparent to cover rounded overlay cases */
nav, nav .nav-inner, nav .nav-inner a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: transparent;
}
/* Global site styles (created by Copilot assistant)
   包含导航、页脚以及隐私页专用容器样式，便于全站共享与维护 */

:root{
  --bg-dark: #070A29;
  --panel-bg: rgba(255,255,255,0.02);
  --muted: rgba(255,255,255,0.8);
}

html,body{height:100%;margin:0;padding:0;background:var(--bg-dark);color:#fff;font-family:'Montserrat',sans-serif}

/* Top navigation (shared) */
nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 0;
  width:100%;
  box-sizing:border-box;
}
nav .logo{margin-left:48px;display:flex;align-items:center}
nav .logo a{color:inherit;text-decoration:none;font-weight:700;font-size:20px}
.nav-links{margin-left:auto;margin-right:48px;display:flex;gap:20px;align-items:center}
.nav-links a{color:inherit;text-decoration:none;padding:8px 12px;border-radius:6px}
.nav-links a:hover{background:rgba(255,255,255,0.03)}
.nav-links a.active{border-bottom:2px solid rgba(255,255,255,0.9)}

/* Privacy container */
.privacy-container{max-width:920px;margin:36px auto;padding:28px;background:var(--panel-bg);border-radius:10px;box-sizing:border-box}
.privacy-container h1{font-family:'Fraunces',serif;font-weight:700;color:#fff;margin-bottom:8px}
.privacy-container h2{margin-top:18px;color:#fff}
.privacy-container p, .privacy-container li{color:var(--muted);line-height:1.8}
.privacy-container ul{padding-left:18px}

/* Footer (shared) */
.site-footer{background:#06102a;color:var(--muted);padding:36px 20px;text-align:center;margin-top:48px}
.site-footer .footer-nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .footer-meta{font-size:13px;color:rgba(255,255,255,0.65)}

/* Responsive tweaks */
@media (max-width:700px){
  nav .logo{margin-left:18px}
  .nav-links{margin-right:18px}
  .privacy-container{margin:20px;padding:18px}
}

/* Utility */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 18px;box-sizing:border-box}
{\rtf1\ansi\ansicpg936\cocoartf2709
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 /* \uc0\u22522 \u30784 \u37325 \u32622  */\
body \{\
    margin: 0;\
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\
    color: #333;\
    line-height: 1.6;\
    background-color: #f7f7f7;\
\}\
\
h1, h2, h3 \{\
    margin: 0;\
    line-height: 1.2;\
\}\
\
a \{\
    text-decoration: none;\
    color: inherit;\
\}\
\
/* --- 1. \uc0\u23548 \u33322 \u26639  (Header) --- */\
.main-header \{\
    display: flex;\
    justify-content: space-between;\
    align-items: center;\
    padding: 15px 5%;\
    background-color: #fff;\
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\
    position: sticky;\
    top: 0;\
    z-index: 100;\
\}\
\
.logo img \{\
    height: 30px; /* \uc0\u35843 \u25972  Logo \u22823 \u23567  */\
\}\
\
.main-nav ul \{\
    list-style: none;\
    margin: 0;\
    padding: 0;\
    display: flex;\
\}\
\
.main-nav li \{\
    margin-left: 30px;\
\}\
\
.main-nav a \{\
    font-size: 16px;\
    font-weight: 500;\
    color: #555;\
    transition: color 0.3s;\
\}\
\
.main-nav a:hover \{\
    color: #4A90E2; /* \uc0\u24748 \u20572 \u39068 \u33394  */\
\}\
\
/* --- 2. \uc0\u20027 \u35270 \u35273 /\u33521 \u38596 \u21306  (Hero Section) --- */\
.hero-section \{\
    height: 100vh;\
    background-size: cover;\
    background-position: center;\
    display: flex;\
    align-items: center;\
    color: #fff;\
    position: relative;\
\}\
\
.hero-section::before \{\
    content: '';\
    position: absolute;\
    top: 0;\
    left: 0;\
    right: 0;\
    bottom: 0;\
    background: rgba(0, 0, 0, 0.3); /* \uc0\u28155 \u21152 \u21322 \u36879 \u26126 \u36974 \u32617  */\
\}\
\
.hero-content \{\
    position: relative;\
    z-index: 10;\
    display: flex;\
    justify-content: space-between;\
    width: 90%;\
    max-width: 1200px;\
    margin: 0 auto;\
\}\
\
.hero-left \{\
    flex: 1;\
    max-width: 50%;\
\}\
\
.brand-name \{\
    font-size: 8vw; /* \uc0\u21697 \u29260 \u21517 \u25918 \u22823 \u22788 \u29702  */\
    font-weight: 900;\
    letter-spacing: 5px;\
    margin-bottom: 20px;\
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);\
\}\
\
.tagline-list \{\
    list-style: none;\
    padding: 0;\
    margin-bottom: 30px;\
    font-size: 20px;\
    font-weight: 300;\
\}\
\
.tagline-list li \{\
    margin-bottom: 5px;\
\}\
\
.hero-right \{\
    flex: 1;\
    max-width: 30%;\
    display: flex;\
    align-items: flex-end;\
    justify-content: flex-end;\
\}\
\
.tagline-message \{\
    font-style: italic;\
    font-size: 24px;\
    text-align: right;\
    line-height: 1.4;\
    border-right: 3px solid #fff;\
    padding-right: 15px;\
\}\
\
.appstore-btn \{\
    display: inline-flex;\
    align-items: center;\
    padding: 10px 20px;\
    background-color: #000;\
    color: #fff;\
    border-radius: 8px;\
    font-weight: 600;\
    font-size: 16px;\
    transition: background-color 0.3s;\
\}\
\
.appstore-btn:hover \{\
    background-color: #333;\
\}\
\
.appstore-btn i \{\
    font-size: 20px;\
    margin-right: 10px;\
\}\
\
/* --- \uc0\u36890 \u29992  Section \u26679 \u24335  --- */\
.product-section \{\
    padding: 80px 5%;\
    text-align: center;\
\}\
\
.product-section h2 \{\
    font-size: 36px;\
    margin-bottom: 60px;\
    color: #2c3e50;\
\}\
\
/* --- 3. \uc0\u20135 \u21697 \u23637 \u31034 \u21306  I - \u26059 \u36716 \u30424  --- */\
@keyframes rotate-large \{\
    from \{ transform: rotate(0deg); \}\
    to \{ transform: rotate(-360deg); \} /* \uc0\u22823 \u30424 \u21521 \u24038 \u65288 \u36870 \u26102 \u38024 \u65289 \u26059 \u36716  */\
\}\
\
@keyframes rotate-small \{\
    from \{ transform: rotate(0deg); \}\
    to \{ transform: rotate(360deg); \} /* \uc0\u23567 \u30424 \u21521 \u21491 \u65288 \u39034 \u26102 \u38024 \u65289 \u26059 \u36716  */\
\}\
\
.disk-container \{\
    position: relative;\
    width: 400px;\
    height: 400px;\
    margin: 0 auto 30px;\
\}\
\
.disk-container img \{\
    position: absolute;\
    top: 50%;\
    left: 50%;\
    transform: translate(-50%, -50%);\
    border-radius: 50%;\
\}\
\
.disk-large \{\
    width: 100%;\
    animation: rotate-large 40s linear infinite;\
    z-index: 1;\
\}\
\
.disk-small \{\
    width: 60%;\
    animation: rotate-small 30s linear infinite;\
    z-index: 2;\
\}\
\
.disk-description \{\
    max-width: 600px;\
    margin: 0 auto;\
    font-size: 18px;\
    color: #555;\
\}\
\
/* --- 4. \uc0\u20135 \u21697 \u23637 \u31034 \u21306  II - \u25240 \u21472 \u22270 \u20999 \u25442  --- */\
.product-series-section \{\
    background-color: #fff;\
\}\
\
.series-gallery \{\
    position: relative;\
    width: 80%;\
    max-width: 800px;\
    height: 500px;\
    margin: 0 auto;\
\}\
\
.series-item \{\
    position: absolute;\
    top: 0;\
    left: 0;\
    width: 100%;\
    height: 100%;\
    border-radius: 15px;\
    overflow: hidden;\
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\
    cursor: pointer;\
    transition: transform 0.6s ease, z-index 0.6s, opacity 0.6s;\
    opacity: 0;\
    z-index: 1;\
\}\
\
.series-item.active \{\
    transform: translate(0, 0);\
    z-index: 10;\
    opacity: 1;\
\}\
\
/* \uc0\u40664 \u35748 \u25910 \u36215 /\u22534 \u21472 \u25928 \u26524  */\
.series-item[data-index="2"] \{ transform: translate(30px, 30px); z-index: 5; opacity: 1; \}\
.series-item[data-index="3"] \{ transform: translate(60px, 60px); z-index: 2; opacity: 1; \}\
\
.series-item img \{\
    width: 100%;\
    height: 100%;\
    object-fit: cover;\
\}\
\
.series-item .overlay \{\
    position: absolute;\
    bottom: 0;\
    left: 0;\
    right: 0;\
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));\
    color: #fff;\
    padding: 20px;\
    text-align: left;\
\}\
\
.series-item .overlay h3 \{\
    margin-bottom: 5px;\
\}\
\
\
/* --- 5. \uc0\u20135 \u21697 \u23637 \u31034 \u21306  III - \u28689 \u24067 \u27969 \u21345 \u29255  --- */\
.product-waterfall-section \{\
    background-color: #f0f0f0;\
\}\
\
.waterfall-grid \{\
    display: grid;\
    /* \uc0\u26680 \u24515 \u65306 \u23454 \u29616 \u28689 \u24067 \u27969 \u24067 \u23616  */\
    grid-template-columns: repeat(3, 1fr); /* 3 \uc0\u21015 \u24067 \u23616  */\
    grid-gap: 20px;\
    max-width: 1200px;\
    margin: 0 auto;\
\}\
\
.waterfall-card \{\
    border-radius: 10px;\
    overflow: hidden;\
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\
    background-color: #fff;\
\}\
\
.waterfall-card img \{\
    width: 100%;\
    height: 100%;\
    object-fit: cover;\
\}\
\
/* \uc0\u23610 \u23544 \u24046 \u24322 \u21270 \u65306 \u35774 \u32622 \u19981 \u21516 \u30340  grid-row-end \u27169 \u25311 \u39640 \u24230 \u24046 \u24322  */\
.size-sm \{ grid-row-end: span 25; height: 180px; \} /* \uc0\u23567 \u23610 \u23544  */\
.size-md \{ grid-row-end: span 35; height: 280px; \} /* \uc0\u20013 \u23610 \u23544  */\
.size-lg \{ grid-row-end: span 45; height: 380px; \} /* \uc0\u22823 \u23610 \u23544  */\
/* \uc0\u27880 \u24847 \u65306 \u36825 \u37324 \u30340  span \u20540 \u26159 \u22522 \u20110 \u19968 \u20010 \u20551 \u23450 \u30340  grid-auto-rows \u35774 \u32622 \u65292 \
   \uc0\u20294 \u20026 \u20102 \u20860 \u23481 \u24615 \u65292 \u30452 \u25509 \u35774 \u32622 \u39640 \u24230 (height)\u22312 \u29616 \u20195 \u27983 \u35272 \u22120 \u20013 \u26356 \u31616 \u21333 \u65292 \
   \uc0\u33509 \u35201 \u32431 \u28689 \u24067 \u27969 \u65292 \u38656 \u35201 \u26356 \u22797 \u26434 \u30340  grid \u25110 \u20351 \u29992  masonry.js\u12290 \u36825 \u37324 \u29992 \u39640 \u24230 \u36817 \u20284 \u12290 \
*/\
.waterfall-card img \{\
    width: 100%;\
    height: 100%;\
\}\
\
\
/* --- 6. \uc0\u20135 \u21697 \u23637 \u31034 \u21306  IV - \u32972 \u26223 \u22270  --- */\
.product-bg-section \{\
    height: 60vh;\
    background-size: cover;\
    background-position: center;\
    color: #fff;\
    display: flex;\
    flex-direction: column;\
    justify-content: center;\
    align-items: center;\
    position: relative;\
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);\
\}\
\
.product-bg-section::before \{\
    content: '';\
    position: absolute;\
    top: 0;\
    left: 0;\
    right: 0;\
    bottom: 0;\
    background: rgba(0, 0, 0, 0.4);\
\}\
\
.product-bg-section * \{\
    position: relative;\
    z-index: 2;\
\}\
\
.btn-primary \{\
    display: inline-block;\
    padding: 12px 30px;\
    background-color: #4A90E2;\
    color: #fff;\
    border-radius: 5px;\
    margin-top: 20px;\
    font-weight: 600;\
    transition: background-color 0.3s;\
\}\
\
.btn-primary:hover \{\
    background-color: #357ABD;\
\}\
\
\
/* --- 7. \uc0\u39029 \u33050  (Footer) --- */\
.main-footer \{\
    background-color: #2c3e50;\
    color: #aaa;\
    padding: 40px 5%;\
    display: flex;\
    justify-content: space-between;\
    align-items: center;\
    font-size: 14px;\
    }

    /* ===== Tarot marquee styles (moved from inline in index.html) ===== */
    /* ===== Tarot marquee styles (centralized) ===== */
    /*
       Centralized variables below control all marquee image appearance.
       To change spacing/radius/scale/width for all tarot images, edit
       the variables in :root or override them per-page.
    */
    :root {
        /* distance between adjacent images (px) */
        --tarot-gap: 18px;
        /* corner radius for tarot images (px) */
        --tarot-radius: 15px;
         /* image scaling: instead of transform-based scaling we control
             size via max-width. Set default to 40% to match previous 0.4 scale. */
         --tarot-scale: 0.4; /* kept for compatibility but not used when using max-width */
         /* image max width inside the marquee (use percentages or px) */
        --tarot-img-max-width: 40%;
        /* scale applied to tarot images (1 = 100%). Set to 0.85 to reduce images by 15% */
        --tarot-img-scale: 0.85;
        /* marquee scale: 1 = 100% ; adjusted so visible height increases ~+60px at 1366px viewport */
        --marquee-scale: 0.76041797;
        /* series image max width as percentage for responsive fit (default desktop 60%) */
        --series-max-width: 60%;
    }

    /* Responsive overrides for series image max-width */
    @media (max-width: 600px) {
        :root { --series-max-width: 90%; }
    }
    @media (min-width: 601px) and (max-width: 1099px) {
        :root { --series-max-width: 75%; }
    }
    @media (min-width: 1100px) {
        :root { --series-max-width: 60%; }
    }

    .marquee {
        overflow: hidden;
        position: relative;
        width: min(100%, 90vw);
        aspect-ratio: 11/16;
        height: auto;
    }

    /* On desktop (e.g. mac) limit the marquee display height to 640px */
    @media (min-width: 1024px) {
        .marquee {
            max-height: 640px;
        }
    }

    /* ===== Series / marquee stacking and scaling adjustments ===== */
    :root {
        --series-scale: 1.75; /* reduced by 30% from 2.5 -> 1.75 */
    }

    /* ensure the layout container can establish stacking context */
    .series-layout { position: relative; }

/* Right-side mirrored marquee styling */

.series-vertical-right {
    /* keep this container in the flow; inner .marquee will be absolutely positioned
       by the shared `.series-layout .marquee` rules so both marquees share the
       same width/top/max-height/etc. The script sets the inner .marquee `left`. */
    position: static;
    width: auto;
    pointer-events: none;
    z-index: 25;
}

@media (max-width: 1100px) {
    .series-vertical-right { display: none; }
}

    /* make marquee positioned and above the series image */
    .series-layout .marquee {
        /* position the marquee absolutely so it can overlay the series image */
        position: absolute;
        /* base centering (default no offset) - specific offsets applied in media queries below */
        left: 50%;
        /* translate to center then scale down by --marquee-scale */
        transform: translateX(-50%) scale(var(--marquee-scale));
        transform-origin: center top;
        /* default vertical offset - tweakable */
        top: 120px;
        z-index: 30; /* higher than series image so marquee is on top */
        width: min(60%, 900px); /* reasonable width cap */
    }

    /* Responsive horizontal offsets for marquee: mobile/tablet/desktop */
    @media (max-width: 600px) {
        /* mobile: no horizontal shift */
        .series-layout .marquee { left: 50%; }
    }
    @media (min-width: 601px) and (max-width: 1099px) {
        /* tablet: shift right by 120px */
        .series-layout .marquee { left: calc(50% + 120px); }
    }
    @media (min-width: 1100px) {
        /* desktop: shift right by 300px */
        .series-layout .marquee { left: calc(50% + 300px); }
    }

    /* make the series image a lower layer and scale it (use max-width so
       the element's actual layout size increases by multiplier) */
    .series-image {
        /* place the series image as an absolute, centered layer inside
           .series-layout so it is enlarged but remains within the module */
        position: absolute;
        /* center then shift left by 280px */
        left: calc(50% - 280px);
        /* align to bottom of the series module */
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        z-index: 1;
        display: block;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        margin: 0;
         /* compute width from module percentage and scale factor; allow overflow so
             the image can visually exceed the module width when scaled */
         width: calc(var(--series-max-width) * var(--series-scale));
         max-width: none;
    }

    /* If the scaled image overflows the column, allow visible overflow but keep marquee on top */
    .series-layout { overflow: visible; min-height: 640px; }

    .marquee-track {
        display: flex;
        gap: var(--tarot-gap);
        will-change: transform;
    }

    .marquee-vertical {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* All images inside the marquee share the same rules so they can be
       adjusted from one place. This overrides less-specific rules elsewhere. */
    .marquee img {
        display: block;
        height: auto;
        object-fit: cover;
        /* Apply the global image-size factor so images are 15% smaller */
        max-width: calc(var(--tarot-img-max-width) * var(--tarot-img-scale));
        width: calc(var(--tarot-img-max-width) * var(--tarot-img-scale));
        transform: none;
        margin: 0;
        border-radius: var(--tarot-radius);
        box-shadow: none;
    }

    /* End tarot marquee styles */

    /* Series image visual block moved above to avoid overriding max-width */
\}\
\
.footer-left, .footer-center, .footer-right \{\
    display: flex;\
    align-items: center;\
\}\
\
.footer-logo \{\
    height: 30px;\
    margin-right: 15px;\
\}\
\
.footer-center a \{\
    margin: 0 10px;\
    transition: color 0.3s;\
\}\
\
.footer-center a:hover \{\
    color: #fff;\
\}\
\
.footer-center span \{\
    color: #666;\
\}\
\
.footer-right a \{\
    font-size: 18px;\
    margin-left: 15px;\
    color: #aaa;\
    transition: color 0.3s;\
\}\
\
.footer-right a:hover \{\
    color: #fff;\
\}\
\
/* \uc0\u21709 \u24212 \u24335 \u35843 \u25972  (\u21487 \u36873 \u65306 \u38024 \u23545 \u23567 \u23631 \u24149 \u35774 \u22791 ) */\
@media (max-width: 768px) \{\
    .main-header \{\
        flex-direction: column;\
    \}\
    .main-nav ul \{\
        margin-top: 10px;\
    \}\
    .main-nav li \{\
        margin: 0 10px;\
    \}\
\
    .hero-content \{\
        flex-direction: column;\
        text-align: center;\
    \}\
\
    .hero-left, .hero-right \{\
        max-width: 100%;\
        margin-bottom: 30px;\
    \}\
    \
    .brand-name \{\
        font-size: 12vw;\
    \}\
\
    .tagline-message \{\
        text-align: center;\
        border-right: none;\
        padding-right: 0;\
        border-top: 2px solid #fff;\
        padding-top: 15px;\
    \}\
\
    .waterfall-grid \{\
        grid-template-columns: repeat(2, 1fr); /* \uc0\u31227 \u21160 \u31471 \u25913 \u20026  2 \u21015  */\
    \}\
\
    .main-footer \{\
        flex-direction: column;\
        text-align: center;\
    \}\
\
    .footer-left, .footer-center, .footer-right \{\
        margin-bottom: 15px;\
    \}\
\}}