/*
 * colors_and_type.css — 星语工坊 brand tokens
 * Adapted from Apple (Pinguo) design system:
 *   structural language (DM Sans, 0.24rem spacing, 1.2rem radius, whisper shadows)
 * Primary brand accent replaced with 乙女粉 #FF6B9D per brand guide.
 */

:root {

  --brand-900: #8b1a47;
  --brand-800: #b0255c;
  --brand-700: #d13271;
  --brand-600: #ec4a88;
  --brand-500: #ff6b9d;   /* primary */
  --brand-400: #ff87af;
  --brand-300: #ffa6c3;
  --brand-200: #ffc4d7;
  --brand-100: #ffdfe9;
  --brand-50:  #fff0f5;   /* 莲白 */

  /* ========== Background neutrals (Apple silver-mist frame) ========== */
  --background-900: #000000;
  --background-800: #1c1c1e;
  --background-700: #3a3a3c;
  --background-600: #8e8e93;
  --background-500: #aeaeb2;
  --background-400: #d1d1d6;
  --background-300: #e5e5ea;
  --background-200: #f5f5f7;   /* silver mist */
  --background-100: #fafafa;
  --background-50:  #ffffff;

  /* ========== Text ========== */
  --text-900: #000000;
  --text-800: #1d1d1f;
  --text-700: #3c3c43;
  --text-600: #48484a;
  --text-500: #6e6e73;
  --text-400: #767676;
  --text-300: #aeaeb2;
  --text-200: #c7c7cc;
  --text-100: #e3e3e8;
  --text-50:  #f5f5f7;

  /* ========== Icon ========== */
  --icon-900: #1d1d1f;
  --icon-800: #2c2c2e;
  --icon-700: #48484a;
  --icon-600: #6e6e73;
  --icon-500: #8e8e93;
  --icon-400: #aeaeb2;
  --icon-300: #c7c7cc;
  --icon-200: #d1d1d6;
  --icon-100: #e5e5ea;
  --icon-50:  #f5f5f7;

  /* ========== Semantic status ========== */
  --state-success: #34c759;
  --state-success-dark: #30d158;
  --state-success-surface: #e9f9ee;
  --state-success-foreground: #ffffff;

  --state-error: #ff3b30;
  --state-error-dark: #ff453a;
  --state-error-surface: #ffecea;
  --state-error-foreground: #ffffff;

  /* ========== Semantic roles (consumed by components) ========== */
  --primary: var(--brand-500);
  --primary-foreground: #ffffff;
  --secondary: var(--background-300);
  --secondary-foreground: var(--text-800);
  --muted: var(--background-200);
  --muted-foreground: var(--text-500);
  --accent: var(--brand-300);
  --accent-foreground: var(--brand-800);
  --destructive: var(--state-error);
  --destructive-foreground: #ffffff;
  --border: rgba(0,0,0,0.08);
  --input: var(--background-300);
  --ring: var(--brand-400);
  --card: #ffffff;
  --card-foreground: var(--text-800);
  --popover: #ffffff;
  --popover-foreground: var(--text-800);
  --foreground: var(--text-800);
  --background: #ffffff;
  --icon-muted: var(--icon-500);
  --hairline: rgba(0,0,0,0.08);
  --hairline-strong: rgba(0,0,0,0.16);

  /* ========== Sidebar ========== */
  --sidebar: #f5f5f7;
  --sidebar-foreground: #1d1d1f;
  --sidebar-accent: #e5e5ea;
  --sidebar-accent-foreground: #1d1d1f;
  --sidebar-primary: var(--brand-500);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-border: #e5e5ea;
  --sidebar-ring: var(--brand-500);

  /* ========== Chart ========== */
  --chart-1: #30d158;
  --chart-2: var(--brand-500);
  --chart-3: #ff9f0a;
  --chart-4: #5e5ce6;
  --chart-5: #bf5af2;

  /* ========== Typography ========== */
  --font-sans: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "PingFang SC", "Microsoft YaHei", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ========== Spacing base ==========
   * 注意：Tailwind v4 编译层（#tw-compiled）在级联中后置并声明了同名 --spacing:.25rem，
   * 本处若再声明 3.84px 属死代码且会误导维护者——间距工具类始终由 Tailwind 层的 token 驱动。
   * 自定义组件（.btn-pill 等）直接使用 px 值，不依赖该 token。 */

  /* ========== Radius ========== */
  --radius: 19.2px;   /* 1.2rem * 16 */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 19.2px;
  --radius-pill: 9999px;

  /* ========== Shadows (whisper-light, Apple philosophy) ========== */
  --shadow-2xs: 0 1px 2px -1px rgba(0,0,0,0.04);
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 3px -1px rgba(0,0,0,0.05);
  --shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 24px -8px rgba(0,0,0,0.08), 0 4px 8px -4px rgba(0,0,0,0.05);
  --shadow-xl: 0 16px 40px -10px rgba(0,0,0,0.10), 0 8px 16px -8px rgba(0,0,0,0.06);
  --shadow-2xl: 0 24px 64px -12px rgba(0,0,0,0.12);

  /* ========== Motion ========== */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;

  /* ========== Tracking ========== */
  --tracking-tight: -0.04em;
  --tracking-normal: -0.022em;
  --tracking-wide: 0.08em;
}

/* ========== Dark mode ========== */
.dark {
  --background: #000000;
  --card: #1c1c1e;
  --popover: #2c2c2e;
  --border: #3a3a3c;
  --input: #3a3a3c;
  --ring: #ff87af;
  --primary: #ff87af;
  --accent: #ff87af;
  --accent-foreground: #1c1c1e;
  --muted: #1c1c1e;
  --muted-foreground: #98989d;
  --foreground: #f5f5f7;
  --popover-foreground: #f5f5f7;
  --card-foreground: #f5f5f7;
  --icon: #f5f5f7;
  --icon-muted: #98989d;
  --success-foreground: #ffffff;
  --hairline: rgba(255,255,255,0.10);
  --hairline-strong: rgba(255,255,255,0.18);

  /* text scale（页面大量内联样式引用 --text-*，整体翻转为暗色灰阶） */
  --text-900: #f5f5f7;
  --text-800: #f5f5f7;
  --text-700: #d1d1d6;
  --text-600: #b8b8bf;
  --text-500: #98989d;
  --text-400: #8e8e93;
  --text-300: #6e6e73;
  --text-200: #48484a;
  --text-100: #2c2c2e;
  --text-50: #1c1c1e;

  /* icon scale */
  --icon-900: #f5f5f7;
  --icon-800: #f5f5f7;
  --icon-700: #d1d1d6;
  --icon-600: #98989d;
  --icon-500: #8e8e93;
  --icon-400: #6e6e73;

  /* 半透明品牌色表面（tag-pill / cta-soft / 图标底座 / 次级按钮） */
  --brand-50: rgba(255,107,157,0.10);
  --brand-100: rgba(255,107,157,0.16);
  --brand-200: rgba(255,135,175,0.38);
  --brand-300: #ff87af;
  --brand-600: #ff87af;
  --brand-700: #ffa6c3;
  --brand-800: #ffc4d7;
  --brand-900: #ffdfe9;

  --sidebar: #1c1c1e;
  --sidebar-foreground: #f5f5f7;
  --sidebar-accent: #3a3a3c;
  --sidebar-accent-foreground: #f5f5f7;
  --sidebar-border: #3a3a3c;

  color-scheme: dark;
}

    
.reveal { opacity: 1 !important; transform: none !important; } .faq-content { max-height:none!important; visibility:visible!important; }

      /* ========== Page-specific styles for 星语工坊 landing ========== */
            html {
        scroll-behavior: smooth;
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
      }
      body {
        -webkit-tap-highlight-color: transparent;
        font-family: var(--font-sans);
        background: #ffffff;
        color: var(--text-800);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      /* Container: max 1200px centered */
      .container-pg {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
      }
      @media (min-width: 768px) {
        .container-pg { padding-left: 32px; padding-right: 32px; }
      }

      /* Navbar */
      .nav-blur {
        background: rgba(255,255,255,0.8);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--hairline);
        height: 44px;
      }

      /* Hero background: very soft pink radial */
      .hero-bg {
        background:
          radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,107,157,0.10) 0%, rgba(255,255,255,0) 60%),
          #ffffff;
      }

      /* Buttons */
      .btn-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-pill);
        font-weight: 500;
        font-size: 15px;
        padding: 10px 22px;
        transition: all var(--duration-base) var(--ease-out);
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid transparent;
        line-height: 1;
      }
      .btn-primary {
        background: var(--primary);
        color: #ffffff;
      }
      .btn-primary:hover {
        background: var(--brand-600);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px -6px rgba(255,107,157,0.5);
      }
      .btn-secondary {
        background: transparent;
        color: var(--primary);
        border-color: var(--brand-200);
      }
      .btn-secondary:hover {
        background: var(--brand-50);
        border-color: var(--brand-300);
      }
      .btn-sm {
        padding: 8px 18px;
        font-size: 14px;
      }

      /* Card */
      .surface-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        transition: transform var(--duration-base) var(--ease-out),
                    box-shadow var(--duration-base) var(--ease-out),
                    border-color var(--duration-base) var(--ease-out);
      }
      .surface-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--hairline-strong);
      }

      /* Typography helpers */
      .eyebrow {
        font-size: 14px;
        font-weight: 500;
        color: var(--primary);
        letter-spacing: 0.02em;
        text-transform: none;
      }
      .hero-title {
        font-size: 44px;
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: var(--text-900);
      }
      @media (min-width: 768px) {
        .hero-title { font-size: 64px; }
      }
      @media (min-width: 1024px) {
        .hero-title { font-size: 72px; }
      }
      .section-title {
        font-size: 36px;
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -0.025em;
        color: var(--text-900);
      }
      @media (min-width: 768px) {
        .section-title { font-size: 48px; }
      }
      .sub-text {
        font-size: 17px;
        line-height: 1.5;
        color: var(--text-500);
      }
      @media (min-width: 768px) {
        .sub-text { font-size: 19px; }
      }

      /* Section spacing */
      .section-pad {
        padding-top: 80px;
        padding-bottom: 80px;
      }
      @media (min-width: 768px) {
        .section-pad { padding-top: 110px; padding-bottom: 110px; }
      }

      /* Nav links */
      .nav-link {
        font-size: 13px;
        color: var(--text-700);
        transition: color var(--duration-fast) var(--ease-out);
        position: relative;
      }
      .nav-link:hover { color: var(--primary); }

      /* Pricing featured */
      .pricing-featured {
        border: 2px solid var(--primary) !important;
        position: relative;
      }
      .pricing-badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 14px;
        border-radius: var(--radius-pill);
        letter-spacing: 0.02em;
      }

      /* FAQ accordion */
      .faq-item {
        border-bottom: 1px solid var(--hairline);
      }
      .faq-item:first-child {
        border-top: 1px solid var(--hairline);
      }
      .faq-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 0;
        text-align: left;
        font-size: 17px;
        font-weight: 500;
        color: var(--text-900);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color var(--duration-fast) var(--ease-out);
        gap: 16px;
      }
      .faq-trigger:hover { color: var(--primary); }
      .faq-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: var(--text-400);
        transition: transform var(--duration-base) var(--ease-out);
      }
      .faq-item.open .faq-icon {
        transform: rotate(45deg);
        color: var(--primary);
      }
      .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-slow) var(--ease-out);
      }
      .faq-item.open .faq-content {
        /* 480px：容纳 320px 窄屏下最长 FAQ 答案（约 10 行）+ 内边距，避免 max-height 截断 */
        max-height: 480px;
      }
      .faq-body {
        padding: 0 0 22px 0;
        color: var(--text-500);
        font-size: 15px;
        line-height: 1.65;
      }

      /* KPI number */
      .kpi-num {
        font-size: 44px;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--primary);
        line-height: 1;
      }
      @media (min-width: 768px) {
        .kpi-num { font-size: 56px; }
      }

      /* Social icon button */
      .social-btn {
        appearance: none;
        background: transparent;
        font: inherit;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--hairline);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-600);
        transition: all var(--duration-base) var(--ease-out);
      }
      .social-btn:hover {
        color: var(--primary);
        border-color: var(--brand-200);
        background: var(--brand-50);
      }

      /* Mobile menu */
      .mobile-menu {
        position: fixed;
        top: 44px;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.95);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--hairline);
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: all var(--duration-base) var(--ease-out);
        z-index: 40;
      }
      .mobile-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }

      /* Scroll reveal */
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }

      /* CTA soft pink bg */
      .cta-soft {
        background: var(--brand-50);
      }

      /* Tag pill */
      .tag-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 500;
        padding: 3px 10px;
        border-radius: var(--radius-pill);
        background: var(--brand-50);
        color: var(--brand-700);
        letter-spacing: 0.01em;
      }

      /* Logo mark — sakura + gear */
      .logo-mark {
        width: 22px;
        height: 22px;
        position: relative;
        flex-shrink: 0;
      }
    

      /* ========== 渲染优化：首屏外区块按需渲染（Uni-app 性能规约的 CSS 等价物） ========== */
      #product, #characters, #pricing, #faq {
        content-visibility: auto;
        contain-intrinsic-size: auto 800px;
      }

      /* ========== 无障碍：跳转主内容链接（仅键盘聚焦时可见） ========== */
      .skip-link {
        position: fixed;
        top: -56px;
        left: 12px;
        z-index: 100;
        background: #ffffff;
        color: var(--primary);
        padding: 10px 18px;
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
        font-size: 14px;
        text-decoration: none;
        transition: top var(--duration-fast) var(--ease-out);
      }
      .skip-link:focus { top: 12px; outline: 2px solid var(--primary); }
      a:focus-visible, button:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 4px;
      }

      /* ========== Dark mode surface fixes（覆盖页面里硬编码的浅色表面） ========== */
      html.dark { color-scheme: dark; }
      .dark body { background: #000000; color: var(--text-800); }
      .dark .nav-blur { background: rgba(20,20,22,0.82); }
      .dark .hero-bg {
        background:
          radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,107,157,0.14) 0%, rgba(0,0,0,0) 60%),
          #000000;
      }
      .dark .mobile-menu { background: rgba(20,20,22,0.96); }
      .dark footer { background: #000000; }
      .dark #qr-modal .bg-white { background: var(--card); }
      .dark #qr-modal button:hover { background: rgba(255,255,255,0.08); }
      .dark .surface-card { box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
      .dark .surface-card:hover { box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6); }

      /* 主题切换按钮：浅色显示月亮，深色显示太阳 */
      html.dark .icon-moon { display: none; }
      html:not(.dark) .icon-sun { display: none; }
      #theme-toggle:hover { background: var(--brand-50); color: var(--primary); }

      /* 导航 CTA 移动端隐藏（<768px，恢复设计原意；未分层以压过 .btn-pill 的 display） */
      @media (max-width: 767.98px) {
        .nav-cta { display: none !important; }
      }
    

      /* ========== Sakura petals（Hero 区飘落樱花瓣） ========== */
      #petals {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
      }
      #petals {
        --petal-opacity: .48;
        --petal-scroll: 0;
        -webkit-mask-image: radial-gradient(ellipse 35% 40% at 50% 48%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.32) 60%, #000 100%);
        mask-image: radial-gradient(ellipse 35% 40% at 50% 48%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.32) 60%, #000 100%);
      }
      .dark #petals { --petal-opacity: .36; }
      .petal-layer { position:absolute; inset:0; opacity:max(0,calc(1 - var(--petal-scroll) * var(--fade-rate))); }
      #petals.is-paused .petal, #petals.is-paused .sway { animation-play-state:paused!important; }
      .petal {
        position: absolute;
        top: -5%;
        opacity: 0;
        will-change: transform;
      }
      .petal .sway {
        display: block;
        width: 100%;
        height: 100%;
        animation: petal-sway var(--sway-dur, 3s) ease-in-out infinite alternate;
      }
      .petal svg { display: block; width: 100%; height: 100%; }
      @keyframes petal-fall {
        0%   { transform: translateY(-4vh) rotate(0deg); opacity: 0; }
        8%   { opacity: var(--petal-opacity, 0.55); }
        90%  { opacity: var(--petal-opacity, 0.55); }
        100% { transform: translateY(108vh) rotate(var(--petal-rot, 320deg)); opacity: 0; }
      }
      @keyframes petal-sway {
        from { transform: translateX(calc(var(--sway-amp, 18px) * -1)) rotate(-16deg); }
        to   { transform: translateX(var(--sway-amp, 18px)) rotate(16deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        #petals { display: none; }
      }
    

      /* ========== 界面精修（借鉴 ant-design / element / uni-app 组件规范） ========== */

      /* [ant-design] 按钮三态完备（default / hover / active）：
         antd Button 规范要求按压态有明确反馈，运动统一走 motion token */
      .btn-primary:active {
        background: var(--brand-700);
        transform: translateY(0);
        box-shadow: 0 2px 8px -4px rgba(255,107,157,0.4);
      }
      .btn-secondary:active {
        background: var(--brand-100);
        border-color: var(--brand-500);
      }

      /* [ant-design] 页头吸顶分层：滚动后加投影，与内容形成 z 轴层级
         （.nav-scrolled 由 JS 切换，见主脚本） */
      .nav-blur.nav-scrolled { box-shadow: 0 4px 16px -8px rgba(0,0,0,0.12); }
      .dark .nav-blur.nav-scrolled { box-shadow: 0 4px 16px -8px rgba(0,0,0,0.6); }

      /* [element] el-collapse 手风琴：触发行悬停淡粉底色，强化可点击感；
         左右 padding + 等量负 margin，悬停底色不破坏文字对齐 */
      .faq-trigger {
        border-radius: var(--radius-md);
        padding-left: 12px;
        padding-right: 12px;
        margin-left: -12px;
        margin-right: -12px;
        transition: background var(--duration-fast) var(--ease-out),
                    color var(--duration-fast) var(--ease-out);
      }
      .faq-trigger:hover { background: var(--brand-50); color: var(--primary); }

      /* [element] el-card hoverable：悬停边框由灰阶改着主色系（brand-300） */
      .surface-card:hover { border-color: var(--brand-300); }

      /* [element] el-tag plain 描边变体：标签加 1px 品牌描边，层次更清晰 */
      .tag-pill { border: 1px solid var(--brand-200); }
      .dark .tag-pill { border-color: var(--brand-100); }

      /* [uni-app] 安全区完整适配：刘海屏 / 全面屏下导航与移动菜单同步让位；
         常规桌面浏览器 env 为 0，无副作用 */
      .nav-blur { height: calc(44px + env(safe-area-inset-top, 0px)); }
      .mobile-menu { top: calc(44px + env(safe-area-inset-top, 0px)); }

      /* [uni-app] 触控目标规范：可点击元素 ≥ 44px（88rpx） */
      #theme-toggle { width: 40px; height: 40px; }
    
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--shadow-2xs:0 1px #0000000d;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-foreground:var(--primary-foreground)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{background:var(--primary-background);color:var(--primary-foreground)}td,th{overflow-wrap:break-word;word-break:break-all;word-break:auto-phrase}th{white-space:nowrap}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:0}.right-4{right:calc(var(--spacing) * 4)}.left-0{left:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[60\]{z-index:60}.mx-auto{margin-inline:auto}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.mb-14{margin-bottom:calc(var(--spacing) * 14)}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-3{height:calc(var(--spacing) * 3)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-11{height:calc(var(--spacing) * 11)}.h-20{height:calc(var(--spacing) * 20)}.h-40{height:calc(var(--spacing) * 40)}.h-52{height:calc(var(--spacing) * 52)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-11{width:calc(var(--spacing) * 11)}.w-20{width:calc(var(--spacing) * 20)}.w-40{width:calc(var(--spacing) * 40)}.w-52{width:calc(var(--spacing) * 52)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse)))}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-black{background-color:var(--color-black)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-white{background-color:var(--color-white)}.mask-repeat{-webkit-mask-repeat:repeat;mask-repeat:repeat}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-10{padding-block:calc(var(--spacing) * 10)}.pt-3{padding-top:calc(var(--spacing) * 3)}.text-center{text-align:center}.font-sans{font-family:var(--font-sans)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[17px\]{font-size:17px}.text-\[40px\]{font-size:40px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}}@media (min-width:40rem){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:flex-row{flex-direction:row}}@media (min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:gap-4{gap:calc(var(--spacing) * 4)}}@media (min-width:64rem){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

      :root:not(.dark) { --primary:#b0255c; }
      :root:not(.dark) .hero-title span { background-image:linear-gradient(135deg,#b0255c,#d13271)!important; }
      :root:not(.dark) .btn-secondary { border-color:#d787a5; color:#a91f56; }
      :root:not(.dark) .eyebrow { color:#a91f56; }
      html { scroll-padding-top: 76px; }
      :focus-visible { outline: 3px solid var(--brand-700); outline-offset: 4px; }
      .dark :focus-visible { outline-color: var(--brand-300); }
      .btn-primary { background: #b0255c; color: #fff; }
      .btn-primary:hover { background: #8b1a47; color: #fff; }
      .dark .btn-primary { background: #ff87af; color: #29101c; }
      .dark .btn-primary:hover { background: #ffa6c3; color: #29101c; }
      .btn-pill, .social-btn, #theme-toggle, #menu-btn { min-height: 44px; }
      #theme-toggle, #menu-btn, .social-btn { min-width: 44px; }
      .nav-blur { height: calc(60px + env(safe-area-inset-top, 0px)); }
      .mobile-menu { top: calc(60px + env(safe-area-inset-top, 0px)); visibility: hidden; }
      .mobile-menu.open { visibility: visible; }
      .nav-cta { min-height: 36px; }
      .purchase-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; text-align:left; }
      .purchase-steps li { padding: 32px; }
      .step-number { color: var(--brand-700); font-size: 32px; font-weight: 700; }
      .dark .step-number { color: var(--brand-300); }
      .purchase-steps h3 { margin: 16px 0 10px; font-size: 20px; font-weight: 600; }
      .purchase-steps p, .purchase-note { color: var(--text-500); font-size: 14px; line-height:1.8; }
      .purchase-note { text-align:center; max-width:760px; margin:28px auto 0; padding:0 24px; }
      .character-card { min-width:0; }
      .character-card img { width:96px; height:96px; flex-shrink:0; }
      .character-card p { flex:1; }
      .character-consult { margin-top:22px; padding:10px 12px; width:100%; gap:6px; font-size:13px; white-space:normal; }
      .contact-details { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; margin:36px auto 0; max-width:600px; padding:28px; background:var(--card); border:1px solid var(--border); border-radius:24px; text-align:center; }
      .contact-details .contact-hint { margin-top:0; }
      .contact-details img { width:144px; height:144px; flex-shrink:0; background:white; border-radius:12px; }
      .contact-label { color:var(--text-500); font-size:13px; }
      .contact-number { font-size:22px; font-weight:600; color:var(--text-900); margin:8px 0 16px; user-select:text; overflow-wrap:anywhere; }
      .contact-hint { color:var(--text-500); font-size:13px; line-height:1.7; margin-top:16px; }
      #contact-dialog { position:fixed; inset:0; margin:auto; padding:0; width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--border); border-radius:24px; color:var(--text-800); background:var(--card); box-shadow:0 24px 80px #0004; }
      #contact-dialog::backdrop { background:#0009; backdrop-filter:blur(6px); }
      .contact-dialog-body { padding:32px 28px 20px; text-align:center; }
      #contact-close { position:absolute; right:8px; top:8px; width:44px; height:44px; font-size:28px; border-radius:50%; cursor:pointer; color:var(--text-600); }
      #contact-close:hover { background:var(--muted); }
      #contact-title { font-size:24px; font-weight:600; margin:8px 0; }
      #contact-description { color:var(--text-500); font-size:14px; margin:8px 0 16px; }
      #contact-qr { width:176px; height:176px; margin:0 auto; border-radius:12px; background:#fff; }
      #copy-account { margin-top:20px; }
      #consultation-block { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
      #consultation-block label { display:block; text-align:left; font-size:13px; color:var(--text-500); }
      #consultation-message { width:100%; min-height:88px; margin:8px 0 12px; padding:10px 12px; background:var(--muted); border:1px solid var(--border); border-radius:10px; font-size:14px; line-height:1.6; resize:vertical; }
      #contact-profile { display:inline-block; color:var(--primary); text-decoration:underline; margin-top:20px; padding:12px; }
      #contact-profile[hidden], [hidden] { display:none!important; }
      .copy-status { min-height:22px; color:var(--text-700); font-size:13px; margin-top:12px; }
      .copy-toast:not(:empty) { position:fixed; z-index:70; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:14px 20px; border:1px solid var(--border); border-radius:14px; background:var(--card); color:var(--text-800); box-shadow:var(--shadow-lg); font-size:14px; }
      .faq-trigger { min-height:60px; }
      @media(max-width:767px) {
        .purchase-steps { grid-template-columns:1fr; gap:16px; }
        .purchase-steps li { padding:24px; }
        .character-card { padding:20px 14px; }
        .contact-details { gap:20px; padding:24px 20px; flex-direction:column; text-align:center; }
        .nav-cta { display:none; }
        #cta .section-title { font-size:32px!important; }
      }
      @media(max-width:359px) { #characters .grid { grid-template-columns:1fr; } .hero-title { font-size:36px; } }
      @media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }
    
.inline-1{position:absolute}
.inline-2{color:var(--text-900); letter-spacing:-0.01em;}
.inline-3{color:var(--text-700);}
.inline-4{width:19px;height:19px;}
.inline-5{width:19px;height:19px;}
.inline-6{width:20px; height:20px; color:var(--text-800);}
.inline-7{color:var(--text-800);}
.inline-8{color:var(--text-800);}
.inline-9{color:var(--text-800);}
.inline-10{color:var(--text-800);}
.inline-11{color:var(--text-800);}
.inline-12{color:var(--text-800);}
.inline-13{padding-top: 44px;}
.inline-14{min-height: 100vh; min-height: 100svh; padding-top: 80px; padding-bottom: 80px; position: relative; z-index: 1;}
.inline-15{transition-delay: 80ms;}
.inline-16{display: block; transition-delay: 160ms; background: linear-gradient(135deg, #ff6b9d 0%, #ff87af 60%, #ffa6c3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.inline-17{transition-delay: 240ms;}
.inline-18{transition-delay: 320ms;}
.inline-19{padding: 14px 30px; font-size: 16px;}
.inline-20{padding: 14px 26px; font-size: 16px;}
.inline-21{width:16px;height:16px;margin-left:4px;}
.inline-22{transition-delay: 400ms; color:var(--text-400); font-size:13px;}
.inline-23{width:14px;height:14px;}
.inline-24{background: var(--hairline);}
.inline-25{width:14px;height:14px;}
.inline-26{background: var(--hairline);}
.inline-27{width:14px;height:14px;}
.inline-28{background: var(--brand-50);}
.inline-29{width:22px;height:22px; color:var(--primary);}
.inline-30{color:var(--text-900); letter-spacing:-0.01em;}
.inline-31{color:var(--text-500);}
.inline-32{transition-delay:100ms;}
.inline-33{background: var(--brand-50);}
.inline-34{width:22px;height:22px; color:var(--primary);}
.inline-35{color:var(--text-900); letter-spacing:-0.01em;}
.inline-36{color:var(--text-500);}
.inline-37{transition-delay:200ms;}
.inline-38{background: var(--brand-50);}
.inline-39{width:22px;height:22px; color:var(--primary);}
.inline-40{color:var(--text-900); letter-spacing:-0.01em;}
.inline-41{color:var(--text-500);}
.inline-42{background: var(--muted);}
.inline-43{box-shadow: var(--shadow-sm);}
.inline-44{color:var(--text-900);}
.inline-45{color:var(--text-500);}
.inline-46{transition-delay:60ms;}
.inline-47{box-shadow: var(--shadow-sm);}
.inline-48{color:var(--text-900);}
.inline-49{color:var(--text-500);}
.inline-50{transition-delay:120ms;}
.inline-51{box-shadow: var(--shadow-sm);}
.inline-52{color:var(--text-900);}
.inline-53{color:var(--text-500);}
.inline-54{transition-delay:180ms;}
.inline-55{box-shadow: var(--shadow-sm);}
.inline-56{color:var(--text-900);}
.inline-57{color:var(--text-500);}
.inline-58{transition-delay:240ms;}
.inline-59{box-shadow: var(--shadow-sm);}
.inline-60{color:var(--text-900);}
.inline-61{color:var(--text-500);}
.inline-62{background: var(--muted);}
.inline-63{color:var(--text-900);}
.inline-64{color:var(--text-900); letter-spacing:-0.03em;}
.inline-65{color:var(--text-400);}
.inline-66{color:var(--text-500);}
.inline-67{color:var(--text-700);}
.inline-68{color:var(--primary); flex-shrink:0; margin-top:2px;}
.inline-69{color:var(--text-700);}
.inline-70{color:var(--primary); flex-shrink:0; margin-top:2px;}
.inline-71{color:var(--text-700);}
.inline-72{color:var(--primary); flex-shrink:0; margin-top:2px;}
.inline-73{transition-delay:80ms;}
.inline-74{color:var(--text-900);}
.inline-75{color:var(--primary); letter-spacing:-0.03em;}
.inline-76{color:var(--text-400);}
.inline-77{color:var(--text-500);}
.inline-78{color:var(--text-700);}
.inline-79{color:var(--primary); flex-shrink:0; margin-top:2px;}
.inline-80{color:var(--text-700);}
.inline-81{color:var(--primary); flex-shrink:0; margin-top:2px;}
.inline-82{color:var(--text-700);}
.inline-83{color:var(--primary); flex-shrink:0; margin-top:2px;}
.inline-84{color:var(--text-700);}
.inline-85{color:var(--primary); flex-shrink:0; margin-top:2px;}
.inline-86{font-size: 40px;}
.inline-87{padding: 16px 36px; font-size: 17px;}
.inline-88{width:18px;height:18px;}
.inline-89{color:var(--text-400);}
.inline-90{border-top: 1px solid var(--hairline); background:var(--background, #fff);}
.inline-91{width:18px;height:18px;}
.inline-92{color:var(--text-800);}
.inline-93{color:var(--text-500);}
.inline-94{color:var(--text-400);}
.inline-95{color:var(--text-400);}
.inline-96{color:var(--text-400); text-decoration:none;}

.free-card-label{font-size:12px;color:var(--text-500);margin-top:14px}
.footer-guides{text-align:center;padding:0 16px 24px;color:var(--text-500);font-size:13px}
.character-card>img{width:104px;height:104px}
@media(max-width:640px){.hero-bg>.container-pg{min-height:78svh;padding-top:70px;padding-bottom:60px}.hero-bg h1{font-size:clamp(36px,9vw,48px)}}