@charset "UTF-8";
  .brand-name span,
  .footer-brand-name strong,
  .footer-links a:hover,
  .nav-link.active,
  .nav-link:hover,
  .search-clear:hover,
  .search-toggle:hover
  {
    color:#070ac0
  }
  .brand,
  .resp-sharing-button__link,
  .skip-nav,
  a
  {
    text-decoration:none
  }
  .hero,
  .hero-stats,
  .style-card,
  .text-center
  {
    text-align:center
  }
  .hero-stat-number,
  .rock,
  .search-result-badge,
  .type-example,
  .visually-hidden
  {
    white-space:nowrap
  }
  .footer-col-title,
  .hero-stat-label,
  .rock
  {
    text-transform:uppercase
  }
  :root
  {
    --clr-bg:#ffffff;
    --clr-bg-footer:#ffffff;
    --clr-surface:#ffffff;
    --clr-surface-alt:#ffffff;
    --clr-surface-deep:#ffffff;
    --clr-surface-hover:#1a1f33;
    --clr-surface-mid:#2c3155;
    --clr-border:#2a2f4b;
    --clr-border-light:#3a3f62;
    --clr-primary:#4500e1;
    --clr-primary-light:#c084fc;
    --clr-primary-dark:#6d28d9;
    --clr-primary-glow:rgba(139, 92, 246, 0.4);
    --clr-primary-shadow:rgba(139, 92, 246, 0.25);
    --clr-primary-btn-glow:rgba(139, 92, 246, 0.5);
    --clr-accent:#e879f9;
    --clr-accent-warm:#f59e0b;
    --clr-text:#000000;
    --clr-text-muted:#000000;
    --clr-text-nav:#000000;
    --clr-text-heading:#000000;
    --clr-text-subheading:#000000;
    --clr-text-white:#ffffff;
    --clr-text-card:#000000;
    --clr-text-dark:#4365ec;
    --clr-share-fb:#1660c1;
    --clr-share-twitter:#1772b8;
    --clr-share-telegram:#0077b3;
    --clr-share-whatsapp:#198754;
    --clr-success:#10b981;
    --clr-warning:#f59e0b;
    --font-primary:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
    --font-card:Arial Unicode MS,'lucida grande',tahoma,verdana,sans-serif;
    --font-mono:'Courier New',Courier,monospace;
    --fs-xs:0.75rem;--fs-sm:0.875rem;
    --fs-base:1rem;--fs-md:1.125rem;
    --fs-lg:1.25rem;--fs-xl:1.5rem;
    --fs-2xl:2rem;--fs-3xl:2.5rem;
    --lh-base:1.6;--lh-tight:1.3;
    --sp-1:4px;--sp-2:8px;
    --sp-3:12px;--sp-4:16px;
    --sp-5:20px;--sp-6:24px;
    --sp-8:32px;--sp-10:40px;
    --sp-12:48px;--sp-16:64px;
    --r-sm:6px;--r-md:12px;
    --r-lg:18px;--r-xl:24px;
    --r-2xl:32px;--r-full:9999px;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.2);
    --shadow-md:0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:0 8px 24px rgba(0,0,0,0.4);
    --shadow-xl:0 15px 30px rgba(0,0,0,0.6);
    --shadow-card:0 8px 24px var(--clr-primary-shadow);
    --shadow-glow:0 0 20px var(--clr-primary-glow);
    --t-fast:0.15s ease;
    --t-normal:0.25s ease;
    --t-slow:0.35s ease;
    --max-w:1200px;
    --nav-h:74px
  }*,
  ::after,
  ::before
  {
    margin:0;
    padding:0;
    box-sizing:border-box
  }
  .dropdown-menu li a,
  .skip-nav
  {
    padding:var(--sp-2) var(--sp-4)
  }
  html
  {
    scroll-behavior:smooth;
    font-size:16px;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%
  }
  body
  {
    font-family:var(--font-primary);
    background:var(--clr-bg);
    color:var(--clr-text);
    line-height:var(--lh-base);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-overflow-scrolling:touch
  }
  button,input,textarea
  {
    font-family:inherit
  }
  img,svg
  {
    display:block;
    max-width:100%
  }
  .cat-dropdown-menu li,
  ul{
    list-style:none
  }
  a
  {
    color:inherit
  }
  button
  {
    cursor:pointer
  }
  .skip-nav
  {
    position:absolute;
    top:-60px;
    left:0;
    background:var(--clr-primary);
    color:#fff;
    border-radius:0 0 var(--r-sm) 0;
    z-index:9999;
    transition:top var(--t-slow);
    font-weight:600
  }
  .skip-nav:focus
  {
    top:0
  }
  .visually-hidden
  {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0
  }
  .nav-links li,
  .site-header
  {
    position:relative
  }
  .nav-container,
  .site-header
  {
    height:var(--nav-h);
    display:flex
  }
  :focus-visible
  {
    outline:2px solid var(--clr-primary);
    outline-offset:3px
  }
  :focus:not(:focus-visible)
  {
    outline:0
  }
  .container
  {
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 var(--sp-5)
  }
  .seo-h2
  {
    font-size:clamp(1.4rem, 3vw, 2rem);
    color:var(--clr-text-heading);
    font-weight:700;
    line-height:var(--lh-tight);
    margin-bottom:var(--sp-4)
  }
  .seo-section-intro
  {
    color:var(--clr-text-muted);
    font-size:var(--fs-md);
    max-width:680px;
    margin:0 auto var(--sp-8);
    line-height:1.7
  }
    .site-header
    {
      z-index:500;
      background:var(--clr-surface);
      border-bottom:1px solid var(--clr-border);
      align-items:center
    }
    .navbar
    {
      width:100%
    }
    .nav-container
    {
      max-width:var(--max-w);
      margin:0 auto;
      padding:0 var(--sp-5);
      justify-content:space-between;
      align-items:center
    }
    .brand,.nav-links
    {
      align-items:center
    }
    .brand
    {
      display:flex;gap:var(--sp-3);
      flex-shrink:0;
      margin-right:auto
    }
    .brand-logo
    {
      max-width:200px;
      width:100%;
      height:auto;
      aspect-ratio:200/50;
      display:block
    }
    .logo-icon
    {
      width:44px;
      height:44px;
      border-radius:14px;
      box-shadow:0 8px 20px var(--clr-primary-glow);
      transform:rotate(-2deg);
      flex-shrink:0
    }
    .cat-dropdown-menu,
    .dropdown-menu,
    .input-container,
    .search-form
    {
      box-shadow:var(--shadow-xl)
    }
    .brand-name
    {
      font-weight:600;
      color:var(--clr-text-heading);
      font-size:var(--fs-lg);
      letter-spacing:-.5px
    }
    .brand-dot,
    .dropdown-menu li a,
    .nav-link{font-size:var(--fs-sm)
    }
    .brand-name span
    {
      font-weight:700
    }
    .brand-dot
    {
      color:var(--clr-text-muted)
    }
    .dropdown-menu li a,
    .nav-link,
    .search-toggle
    {color:var(--clr-text-nav)
    }
    .menu-toggle
    {
      display:none;
      flex-direction:column;
      background:0 0;
      border:none;
      padding:var(--sp-1);
      gap:5px;
      cursor:pointer
    }
    .bar
    {
      display:block;
      width:25px;
      height:3px;
      background:var(--clr-text-nav);
      border-radius:var(--r-full);
      transition:var(--t-normal)
    }
    .nav-links
    {
      display:flex;
      gap:var(--sp-1)
    }
    .nav-link
    {
      padding:var(--sp-2) var(--sp-3);
      display:block;
      border-radius:var(--r-sm);
      transition:color var(--t-fast),background var(--t-fast)
    }
    .nav-link.dropdown-toggle
    {
      display:inline-flex;
      align-items:center;
      gap:4px;
      cursor:pointer;
      user-select:none;
      position:relative;
      padding:8px 12px;
      width:auto;
      white-space:nowrap;
      text-decoration:none
    }
    .nav-link.dropdown-toggle svg
    {
      flex-shrink:0;
      vertical-align:middle;
      margin-left:4px;
      pointer-events:none
    }
    @media (hover:none),(pointer:coarse)
    {
      .nav-link.dropdown-toggle
      {
        display:inline-flex;
        justify-content:flex-start;
        align-items:center;
        width:auto;
        padding:10px 14px;
        touch-action:manipulation
      }
    }
    .dropdown-menu
    {
      display:none;
      position:absolute;
      top:calc(100% + 4px);
      left:0;
      background:var(--clr-surface-deep);
      min-width:180px;
      max-width:90vw;
      border-radius:var(--r-md);
      border:1px solid var(--clr-border-light);
      z-index:9999;
      padding:var(--sp-2) 0;
      max-height:60vh;
      overflow-y:auto;
      transition:opacity .15s,transform .15s
    }
    .cat-dropdown-menu.show,
    .dropdown-menu
    .show,
    .nav-links li:hover 
    .dropdown-menu,
    .search-results
    .show
    {
      display:block
    }
    .dropdown-menu li a
    {
      display:block;
      transition:background var(--t-fast),
      color var(--t-fast)
    }
    .cat-dropdown-menu a:hover,
    .dropdown-menu li a:hover
    {
      background:var(--clr-surface-mid);
      color:var(--clr-primary-light)
    }
    @media (max-width:1024px)
    {
      .dropdown-menu
      {
        left:0!important;
        right:auto!important;
        max-width:calc(100vw - 16px)
      }
    }
    @media (max-width:480px)
    {
      .nav-link.dropdown-toggle
      {
        padding:10px 14px
      }
      .dropdown-menu
      {
        max-width:calc(100vw - 12px)
      }
    }
    .nav-search-wrapper
    {
      position:relative;
      display:flex;
      align-items:center;
      margin-left:12px
    }
    .search-toggle
    {
      background:0 0;
      border:none;
      cursor:pointer;
      padding:8px;
      border-radius:var(--r-full);
      transition:.2s;
      display:flex;
      align-items:center;
      justify-content:center
    }
    .search-toggle:hover
    {
      background:var(--clr-surface-alt)
    }
    .search-form
    {
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      background:var(--clr-surface-deep);
      border:1px solid var(--clr-border-light);
      border-radius:var(--r-lg);
      z-index:1200;opacity:0;
      visibility:hidden;
      transform:translateY(-10px);
      transition:opacity .2s,visibility .2s,transform .2s;
      min-width:320px
    }
    .search-form.active
    {
      opacity:1;
      visibility:visible;
      transform:translateY(0)
    }
    .search-form-inner
    {
      display:flex;
      align-items:center;
      gap:8px;
      background:var(--clr-surface-alt);
      border:1px solid var(--clr-border);
      border-radius:var(--r-md);
      padding:6px 10px;
      margin:8px
    }
    .search-form-inner 
    .search-icon
    {
      flex-shrink:0;
      color:var(--clr-text-muted)
    }
    .search-form-inner input
    {
      flex:1;
      background:0 0;
      border:none;
      color:var(--clr-text-white);
      font-size:.9rem;
      padding:8px 0;
      outline:0
    }
    .search-form-inner input
    ::placeholder
    {
      color:var(--clr-text-muted)
    }
    .search-clear
    {
      background:0 0;
      border:none;
      color:var(--clr-text-muted);
      cursor:pointer;
      font-size:1.1rem;
      padding:0 4px;
      transition:color .2s
    }
    .search-results
    {
      max-height:300px;
      overflow-y:auto;
      margin:0 8px 8px;
      border-top:1px solid var(--clr-border);
      display:none
    }
    .search-result-item
    {
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      cursor:pointer;
      transition:background .2s;
      border-radius:var(--r-md);
      color:var(--clr-text)
    }
    .search-result-item:hover
    {
      background:var(--clr-surface-mid)
    }
    .search-result-badge
    {
      font-size:.7rem;
      background:var(--clr-primary-dark);
      padding:2px 8px;
      border-radius:var(--r-full);
      color:#fff
    }
    .search-result-text
    {
      flex:1;
      font-size:.85rem;
      word-break:break-word
    }
    .search-result-empty
    {
      padding:12px;
      text-align:center;
      color:var(--clr-text-muted);
      font-size:.85rem
    }
    .cat-quick-link,
    .input-container
    {
      border:1px solid #070ac0
    }
    .hero
    {
      position:relative;
      padding:var(--sp-16) 0 var(--sp-10);
      overflow:hidden
    }
    .hero-bg-glow
    {
      position:absolute;
      top:-100px;
      left:50%;
      transform:translateX(-50%);
      width:600px;
      height:600px;
      background:radial-gradient(ellipse,rgba(139,92,246,.15) 0,transparent 70%);
      pointer-events:none;
      z-index:0
    }
    .hero-content
    {
      position:relative;z-index:1
    }
    .hero-title
    {
      font-size:clamp(1.8rem, 5vw, 3rem);
      color:#000000;
      font-weight:800;
      letter-spacing:-.5px;
      line-height:1.2;
      text-shadow:0 4px 12px rgba(255, 255, 255, 0.25);
      margin-bottom:var(--sp-3)
    }

  .hero-title-sub
  {
    display:block;
    font-size:clamp(1rem, 2.5vw, 1.4rem);
    color:#1f0ff7;
    font-weight:500;
    margin-top:var(--sp-2)
    }
    .hero-subtitle
    {
 color:#000000;
 font-size:clamp(.95rem, 2vw, 1.15rem);
 max-width:600px;
 margin:var(--sp-3) auto var(--sp-8)
 }
 .hero-stat-ext,
 .hero-stat-num
 {
   color:#070ac0
   }
   .hero-stats
   {
display:flex;
justify-content:center;
align-items:flex-start;
gap:2.5rem;flex-wrap:wrap
}
.hero-stat
{
  display:flex;
  flex-direction:column;
  align-items:center
  }
  .hero-stat-number
  {
    display:flex;
    align-items:baseline;
    gap:3px;min-width:80px
    }
    .hero-stat-num
    {
 font-size:clamp(1.6rem, 4vw, 2.4rem);
 font-weight:800;
 line-height:1
 }
 .hero-stat-ext
 {
   font-size:clamp(1.2rem, 3vw, 1.6rem);
   font-weight:700
   }
   .hero-stat-label
   {
margin-top:6px;
font-size:var(--fs-xs);
color:#000000;
letter-spacing:.5px
}
.input-section-wrapper
{
  position:sticky;
  top:0;z-index:200;
  background:var(--clr-bg);
  padding:var(--sp-3) 0 var(--sp-2);
  will-change:transform;
  transform:translateZ(0)
  }
  .input-container
  {
    background:#ffffff;
    border-radius:10px;
    padding:var(--sp-3) var(--sp-4) var(--sp-2)
    }
    .input-row
    {
 display:flex;
 align-items:center;
 gap:var(--sp-2)
}
.name-input
 {
   flex:1;
   background:#ffffff;
   text-align: center;
   border:2px solid var(--clr-border-light);
   border-radius:10px;
   padding:var(--sp-2) var(--sp-4);
   font-size:18px;
   font-weight: 400;
   color:#000000;
   resize:vertical;
   min-height:48px;
   max-height:80px;
   transition:border var(--t-fast)
   }
   .name-input:focus
    {
outline:0;
border-color:var(--clr-primary);
box-shadow:0 0 0 3px rgba(139,92,246,.15)
}
.name-input
::placeholder
{
  color:var(--clr-text-muted)
  }
  .reset-btn
  {
    background:#070ac0;
    border:none;
    border-radius:10px;
    width:48px;
    height:48px;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background var(--t-fast),color var(--t-fast)
    }
    .cat-dropdown-toggle,
    .cat-quick-link
    {
 background:#070ac0;
 padding:4px 12px;
 font-weight:500;
 transition:all var(--t-fast);
 color:#ffffff
 }
 .reset-btn:hover
 {
   background:var(--clr-primary);
   color:var(--clr-text-white)
   }
   .input-bottom-bar
   {
display:flex;
justify-content:space-between;
align-items:center;flex-wrap:wrap;
margin-top:var(--sp-2);
gap:var(--sp-2);
overflow:visible!important
}
.categories-bar,
.share-row
{
  display:flex;
  align-items:center;
  gap:var(--sp-2)
  }
  .categories-bar
  {
    flex-wrap:wrap;
    overflow:visible!important
    }
    .share-row
    {
 flex-wrap:wrap
 }
 .cat-dropdown-toggle,
 .resp-sharing-button
 {
   align-items:center;
   font-size:var(--fs-xs)
   }
   .cat-quick-link
   {
border-radius:var(--r-full);
font-size:var(--fs-xs)
}
.cat-dropdown-toggle:hover,
.cat-quick-link:hover
{
 border-color:var(--clr-primary);
 color:var(--clr-primary-light)
 }
 .cat-dropdown-wrapper
 {
   position:relative;
   z-index:9999
   }
   .cat-dropdown-toggle
   {
border:1px solid var(--clr-border);
border-radius:var(--r-full);
display:inline-flex;
gap:4px;
cursor:pointer
}
.cat-dropdown-menu
{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  background:var(--clr-surface-deep);
  border:1px solid var(--clr-border-light);
  border-radius:var(--r-md);
  min-width:180px;
  max-width:90vw;
  max-height:300px;
  overflow-y:auto;
  z-index:999999;
  padding:var(--sp-2) 0
  }
  .install-btn,
  .resp-sharing-button
  {
    display:inline-flex;
    font-family:var(--font-primary)
  }
  .cat-dropdown-menu a
  {
    display:block;
    padding:var(--sp-2) var(--sp-4);
    font-size:var(--fs-xs);
    color:var(--clr-text-nav);
    transition:background var(--t-fast)
  }
  @media (max-width:768px)
  {
    .cat-dropdown-menu
    {
 left:50%;
 transform:translateX(-50%);
 width:auto;
 min-width:180px;
 max-width:90vw
    }
  }
  .resp-sharing-button
  {
    gap:5px;
    padding:5px 10px;
    border-radius:var(--r-full);
    border:none;
    color:var(--clr-text-white);
    cursor:pointer;
    transition:filter var(--t-fast),transform var(--t-fast)
  }
  .install-btn,
    .style-card
    {
 align-items:center;
 cursor:pointer
    }
    .resp-sharing-button svg
    {
 width:12px;
 height:12px;
 fill:currentColor
    }
    .resp-sharing-button span
    {
 font-size:var(--fs-xs)
    }
    .resp-sharing-button--facebook
    {
 background:var(--clr-share-fb)
    }
    .resp-sharing-button--twitter
    {
 background:var(--clr-share-twitter)
    }
    .resp-sharing-button--telegram{background:var(--clr-share-telegram)
    }
    .resp-sharing-button--whatsapp{background:var(--clr-share-whatsapp)
    }
    .resp-sharing-button:hover
    {
 filter:brightness(1.15);
 transform:translateY(-2px)
    }
    .install-btn
    {
 gap:6px;
 background:linear-gradient(135deg,#8b5cf6,#c084fc);
 border:none;
 border-radius:50px;
 padding:5px 12px;
 font-size:13px;
 font-weight:600;
 color:#fff;
 transition:.2s
    }
    #categoriesContainer h3,
    .section-heading
    {
 color:var(--clr-text-subheading);
 line-height:var(--lh-tight)
    }
    .install-btn:hover
    {
 transform:translateY(-2px);
 filter:brightness(1.05)
    }
    .install-btn svg
    {
 width:14px;
 height:14px;
 stroke:white
    }
    .content-fontsection
    {
 max-width:var(--max-w);
 margin:var(--sp-6) auto;
 padding:0 var(--sp-5)
    }
    .section-heading
    {
 font-size:clamp(1.1rem, 2.5vw, 1.6rem);
 margin:var(--sp-10) 0 var(--sp-5);
 border-left:5px solid var(--clr-primary);
 padding-left:var(--sp-4)
    }
    .intro-card-demo,.style-card
    {
 border:1px solid var(--clr-border)
    }
    .styles-grid
    {
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:var(--sp-4)
    }
    .style-card
    {
 position:relative;
 background:linear-gradient(135deg, #01dfba 0, #01dfba 50% 50%);
 border-radius:10px;
 padding:30px var(--sp-3) var(--sp-4);
 color:var(--clr-text-card);
 font-size:var(--fs-lg);
 word-break:break-word;
 transition:border-color var(--t-normal),box-shadow var(--t-normal),background var(--t-normal),transform var(--t-normal);
 min-height:90px;
 display:flex;
 justify-content:center;
 font-family:var(--font-card);
 will-change:transform;
 content-visibility:auto;
 contain-intrinsic-size:110px
    }
    .copy-btn,
    .rock
    {
 position:absolute;
 font-family:var(--font-primary)
    }
    .style-card:hover
    {
 border-color:#070ac0;
 box-shadow:#c11616;
 background:#ffffff;
 transform:translateY(-3px)
    }
    #scrollToTop,
    .copy-btn:hover,
    .rock
    {
 background:var(--clr-primary)
    }
    .style-card:active
    {
 transform:translateY(-1px)
    }
    .rock
    {
 right:12px;
 top:8px;
 color:#ffffff;
 font-size:8px;
 padding:2px 10px;
 border-radius:10px;
 font-weight:700;
 letter-spacing:.3px;
 line-height:18px;
 overflow:hidden;
 text-overflow:ellipsis;
 max-width:calc(100% - 24px)
    }
    .copy-btn
    {
 left:10px;
 bottom:10px;
 background:rgba(4, 43, 214, 0.8);
 border:none;
 border-radius:var(--r-full);
 padding:4px 10px;
 font-size:10px;
 font-weight:600;
 color:#fff;
 cursor:pointer;
 transition:background var(--t-fast),transform var(--t-fast);
 z-index:5;
 backdrop-filter:blur(2px)
    }
    .demo-name-fancy,
    .seo-section--alt
    {
 border-bottom:1px solid var(--clr-border)
    }
    .demo-name-fancy,
    .demo-name-plain,
    .gender-examples li,
    .platform-example,
    .type-example
    {
 font-family:var(--font-card)
    }
    .copy-btn:hover
    {
 transform:scale(1.05)
    }
    #categoriesContainer h3
    {
 font-size:clamp(1rem, 2vw, 1.4rem);
 margin:var(--sp-8) 0 var(--sp-4);
 padding-left:var(--sp-3);
 border-left:3px solid var(--clr-primary-light)
    }
    .seo-content-wrapper
    {
 margin-top:var(--sp-10)
    }
    .seo-section
    {
 padding:var(--sp-16) 0
    }
    .seo-section--alt
    {
 background:linear-gradient(180deg,var(--clr-surface) 0,rgba(18,22,36,0) 100%);
 border-top:1px solid var(--clr-border)
    }
    .intro-card-demo,
    .step-card
    {
 background:var(--clr-surface);
 text-align:center
    }
    .seo-section .container
    {
 max-width:900px;
 margin:0 auto
    }
    .seo-section h2.seo-h2
    {
 font-size:1.8rem;
 margin-bottom:1rem;
 border-left:5px solid var(--clr-primary);
 padding-left:1rem
    }
    .seo-section h3
    {
 color:var(--clr-primary-light);
 font-size:1.4rem;
 margin-top:2rem;
 margin-bottom:.75rem;
 font-weight:600
    }
    .seo-section p
    {
 color:var(--clr-text-muted);
 margin-bottom:1.2rem;    
  font-size:1rem


}


.seo-section ol,.seo-section ul{margin:1rem 0 1.5rem 1.8rem;    
 color:var(--clr-text-muted)
}

  .seo-section li{margin-bottom:.5rem;    
 line-height:1.6
}

  .seo-section strong{color:var(--clr-text-heading);    
 font-weight:600
}

  .seo-intro-grid
{
display:grid;    
 grid-template-columns:1fr 340px;    
 gap:var(--sp-10);    
 align-items:center

}
.ff-text p,.seo-intro-text p,.seo-section p
{
color:var(--clr-text-muted);    
 line-height:1.8;    
 margin-bottom:var(--sp-4);    
 font-size:var(--fs-md)
}
.seo-intro-text p:last-child
{
margin-bottom:0
}
.ff-text strong,.gender-card strong,.gender-examples strong,.platform-card strong,.seo-intro-text strong,.seo-section strong
{
color:var(--clr-text)
}
.seo-intro-text em
{
color:var(--clr-primary-light);    
 font-style:italic
}
.intro-card-demo
{
border-radius:var(--r-2xl);    
 padding:var(--sp-8) var(--sp-6);    
 box-shadow:var(--shadow-lg)
}
.demo-name-plain
{
font-size:var(--fs-xl);    
 color:var(--clr-text-muted);    
 margin-bottom:var(--sp-3)
}
.demo-arrow
{
font-size:1.5rem;    
 color:var(--clr-primary);    
 margin:var(--sp-2) 0
}
.platform-grid,.steps-grid,.tips-grid
{
grid-template-columns:repeat(3,1fr);    
 margin-top:var(--sp-6)
}
.demo-name-fancy
{
font-size:var(--fs-md);    
 color:var(--clr-text-card);    
 padding:var(--sp-2) 0;    
 word-break:break-all
}
.demo-name-fancy:last-child,.ff-tip:last-child,.gender-examples li:last-child,.type-row:last-child
{
border-bottom:none
}
.def-card:hover,.platform-card:hover,.step-card:hover
{
border-color:var(--clr-primary);    
 box-shadow:var(--shadow-card)
}
.steps-grid
{
display:grid;    
 gap:var(--sp-6)
}
.step-card

{

border:1px solid var(--clr-border);    
 border-radius:var(--r-xl);    
 padding:var(--sp-8) var(--sp-6);    
 position:relative;    
 transition:border-color var(--t-normal),box-shadow var(--t-normal)
}
.step-num
{
position:absolute;    
 top:-14px;    
 left:50%;    
 transform:translateX(-50%);    
 background:linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light));    
 color:#fff;    
 font-size:var(--fs-sm);    
 font-weight:800;    
 width:28px;    
 height:28px;    
 border-radius:var(--r-full);    
 display:flex;    
 align-items:center;    
 justify-content:center
}
.platform-icon,.step-icon
{
font-size:2rem;    
 margin-bottom:var(--sp-3)
}
.step-title
{
color:var(--clr-text-heading);    
 font-size:var(--fs-md);    
 font-weight:700;    
 margin-bottom:var(--sp-2)
}
.step-desc,.tip-card p
{
color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 line-height:1.7
}
.platform-grid,.tips-grid
{
display:grid;    
 gap:var(--sp-5)
}
.platform-card
{
background:var(--clr-surface);    
 border:1px solid var(--clr-border);    
 border-radius:var(--r-xl);    
 padding:var(--sp-6);    
 transition:border-color var(--t-normal),transform var(--t-normal),box-shadow var(--t-normal)
}
.platform-card:hover
{
transform:translateY(-4px)
}
.platform-title
{
color:var(--clr-text-heading);    
 font-size:var(--fs-base);    
 font-weight:700;    
 margin-bottom:var(--sp-3)
}
.footer-tagline,.gender-card p,.platform-card p
{
color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 line-height:1.7;    
 margin-bottom:var(--sp-4)
}
.platform-example
{
background:var(--clr-surface-alt);    
 border-radius:var(--r-md);    
 padding:var(--sp-2) var(--sp-3);    
 font-size:var(--fs-sm);    
 color:var(--clr-primary-light);    
 text-align:center;    
 word-break:break-all
}
.types-list
{
max-width:800px;    
 margin:var(--sp-6) auto 0;    
 background:var(--clr-surface);    
 border:1px solid var(--clr-border);    
 border-radius:var(--r-xl);    
 overflow:hidden
}
.type-row
{
display:flex;    
 align-items:center;    
 gap:var(--sp-4);    
 padding:var(--sp-4) var(--sp-6);    
 border-bottom:1px solid var(--clr-border);    
 transition:background var(--t-fast)}.type-row:hover
{
background:var(--clr-surface-hover)}.type-icon
{
font-size:1.8rem;    
 min-width:48px;    
 text-align:center}.type-info
{
flex:1
}
.type-title
{
color:var(--clr-text-heading);    
 font-size:var(--fs-base);    
 font-weight:700;    
 display:block;    
 margin-bottom:4px
}
.type-info p
{
color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 line-height:1.5;    
 margin:0
}
.type-example
{
background:var(--clr-surface-alt);    
 border-radius:var(--r-md);    
 padding:var(--sp-2) var(--sp-3);    
 font-size:var(--fs-sm);    
 color:var(--clr-primary-light);    
 overflow-x:auto;    
 max-width:180px
}
.gender-grid
{
display:grid;    
 grid-template-columns:1fr 1fr;    
 gap:var(--sp-6);    
 margin-top:var(--sp-6)
}
.gender-card
{
background:var(--clr-surface);    
 border:1px solid var(--clr-border);    
 border-radius:var(--r-xl);    
 padding:var(--sp-6);    
 overflow:hidden;    
 position:relative
}
.gender-card::before
{
content:'';    
 position:absolute;    
 top:0;    
 left:0;    
 right:0;    
 height:3px
}
.gender-card--boys::before
{
background:linear-gradient(90deg,#3b82f6,#8b5cf6)
}
.gender-card--girls::before
{
background:linear-gradient(90deg,#ec4899,#c084fc)
}
.gender-card-header
{
display:flex;    
 align-items:center;    
 gap:var(--sp-3);    
 margin-bottom:var(--sp-4)
}
.gender-card-header span
{
font-size:1.8rem
}
.gender-card-header h3
{
color:var(--clr-text-heading);    
 font-size:var(--fs-md);    
 font-weight:700
}
.ff-tip,.gender-examples li
{
font-size:var(--fs-sm);    
 border-bottom:1px solid var(--clr-border)
}
.gender-examples
{
background:var(--clr-surface-alt);    
 border-radius:var(--r-md);    
 padding:var(--sp-3) var(--sp-4);    
 list-style:none
}
.gender-examples li{color:var(--clr-primary-light);    
 padding:var(--sp-1) 0
}
.ff-section-grid{display:grid;    
 grid-template-columns:1fr 320px;    
 gap:var(--sp-10);    
 align-items:start
}
.ff-tips{margin-top:var(--sp-5)
}
.ff-tip{display:flex;    
 align-items:flex-start;    
 gap:var(--sp-3);    
 padding:var(--sp-2) 0;    
 color:var(--clr-text-muted);    
 line-height:1.6
}
.ff-tip-icon{font-size:1rem;    
 flex-shrink:0;    
 margin-top:2px
}
.ff-examples-box{background:var(--clr-surface);    
 border:1px solid var(--clr-border);    
 border-radius:var(--r-xl);    
 padding:var(--sp-5);    
 position:sticky;    
 top:calc(var(--nav-h) + var(--sp-4))
}
.ff-examples-title{color:var(--clr-text-heading);    
 font-size:var(--fs-base);    
 font-weight:700;    
 margin-bottom:var(--sp-4);    
 padding-bottom:var(--sp-3);    
 border-bottom:1px solid var(--clr-border)
}
.bgmi-style-chip,.ff-name-list span{background:var(--clr-surface-alt);    
 font-family:var(--font-card);    
 font-size:var(--fs-sm);    
 color:var(--clr-primary-light);    
 word-break:break-all
}
.ff-name-list,.footer-links{display:flex;    
 flex-direction:column;    
 gap:var(--sp-2)
}
.ff-name-list span{border-radius:var(--r-md);    
 padding:var(--sp-2) var(--sp-3)
}
.bgmi-styles-strip
{
  display:flex;    
 flex-wrap:wrap;    
 gap:var(--sp-3);    
 margin-top:var(--sp-6)
}
.bgmi-style-chip
{
border:1px solid var(--clr-border);    
 border-radius:var(--r-full);    
 padding:var(--sp-2) var(--sp-4);    
 transition:border-color var(--t-fast),transform var(--t-fast);    
 cursor:default
}
.collapsible,
.testimonial-card,
.tip-card
{
background:var(--clr-surface);    
 position:relative
}
.bgmi-style-chip:hover
{
border-color:var(--clr-primary);    
 transform:scale(1.03)
}
.testimonials-grid
{
display:grid;    
 grid-template-columns:repeat(2,1fr);    
 gap:var(--sp-5);    
 margin-top:var(--sp-6)
}
.testimonial-card,.tip-card
{
border:1px solid var(--clr-border);    
 border-radius:var(--r-xl);    
 padding:var(--sp-6);    
 transition:border-color var(--t-normal),transform var(--t-normal)
}
.collapsible,.faq-content.show
{
padding:var(--sp-4) var(--sp-5)
}
.testimonial-card::before
{
content:'201C';    
 position:absolute;    
 top:var(--sp-3);    
 right:var(--sp-5);    
 font-size:4rem;    
 color:var(--clr-primary);    
 opacity:.2;    
 line-height:1;    
 font-family:Georgia,serif
}
.testimonial-card:hover
{
border-color:var(--clr-primary-light);    
 transform:translateY(-3px)
}
.testimonial-stars
{
color:var(--clr-accent-warm);    
 font-size:var(--fs-base);    
 margin-bottom:var(--sp-3);    
 letter-spacing:2px
}
.testimonial-text
{
color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 line-height:1.8;    
 margin-bottom:var(--sp-4);    
 font-style:italic
}
.tip-num,.tip-title
{
margin-bottom:var(--sp-2)
}
.testimonial-author
{
display:flex;    
 flex-direction:column;    
 gap:2px
}
.testimonial-name
{
color:var(--clr-text-heading);    
 font-size:var(--fs-sm);    
 font-weight:700
}
.footer-copyright,.testimonial-meta
{
color:var(--clr-text-muted);    
 font-size:var(--fs-xs)
}
.tip-card:hover
{
border-color:var(--clr-primary);    
 transform:translateY(-3px)
}
.tip-num
{
font-size:2.5rem;    
 font-weight:900;    
 color:var(--clr-primary);    
 opacity:1;    
 line-height:1
}
.collapsible,.tip-title
{
font-size:var(--fs-base)
}
.tip-title
{
color:var(--clr-text-heading);    
 font-weight:700
}
.faq-list
{
max-width:780px;    
 margin:0 auto
}
.faq-item
{
margin-bottom:var(--sp-2)
}
.collapsible
{
width:100%;    
 text-align:left;    
 color:var(--clr-text-subheading);    
 border:1px solid var(--clr-border);    
 border-radius:var(--r-lg);    
 font-family:var(--font-primary);    
 cursor:pointer;    
 transition:border-color var(--t-fast),background var(--t-fast);    
 padding-right:var(--sp-12);    
 line-height:var(--lh-tight)
}
.collapsible.active,.faq-content
{
background:var(--clr-surface-alt)
}
.collapsible::after
{
content:'+';    
 position:absolute;    
 right:var(--sp-5);    
 top:50%;    
 transform:translateY(-50%);    
 font-size:1.4rem;    
 color:var(--clr-primary);    
 font-weight:400;    
 transition:transform var(--t-fast)
}
.collapsible.active
{
border-color:var(--clr-primary);    
 border-radius:var(--r-lg) var(--r-lg) 0 0
}
.collapsible.active::after
{
content:'-'
}
.collapsible:hover
{
border-color:var(--clr-primary-light)
}
.faq-content
{
max-height:0;    
 overflow:hidden;    
 transition:max-height .25s ease-out,padding .2s;    
 border:1px solid var(--clr-primary);    
 border-top:none;    
 border-radius:0 0 var(--r-lg) var(--r-lg);    
 padding:0 var(--sp-5);    
 color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 line-height:1.8
}
.def-card,.def-card p,.platform-mini-item
{
overflow-wrap:break-word
}
.footer-bottom,.site-footer
{
border-top:1px solid var(--clr-border)
}
.faq-content.show
{
max-height:300px
}
.site-footer
{
background:var(--clr-bg-footer);    
 margin-top:var(--sp-16)
}
.footer-top
{
padding:var(--sp-12) 0 var(--sp-10)
}
.footer-top-inner
{
display:grid;    
 grid-template-columns:2fr 1fr 1fr 1fr;    
 gap:var(--sp-8);    
 align-items:start
}
.footer-bottom-inner,.footer-brand,.footer-rating
{
display:flex;    
 gap:var(--sp-2)
}
.footer-brand
{
align-items:center;    
 margin-bottom:var(--sp-4)
}
.footer-logo-icon
{
font-size:1.5rem
}
.footer-brand-name
{
font-size:var(--fs-lg);    
 color:var(--clr-text-heading);    
 font-weight:600
}
.footer-rating
{
align-items:center;    
 color:var(--clr-text-muted);    
 font-size:var(--fs-xs)
}
.footer-stars
{
color:var(--clr-accent-warm);    
 letter-spacing:1px
}
.footer-col-title
{
color:var(--clr-text-heading);    
 font-size:var(--fs-sm);    
 font-weight:700;    
 letter-spacing:.8px;    
 margin-bottom:var(--sp-4)
}
.footer-links a
{
color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 transition:color var(--t-fast);    
 line-height:1.5
}
.footer-bottom
{
padding:var(--sp-5) 0
}
.footer-bottom-inner
{
flex-direction:column;    
 align-items:center;    
 text-align:center
}
.footer-copyright-brand
{
color:var(--clr-primary-light);    
 font-weight:600
}
.footer-disclaimer
{
color:var(--clr-text-muted);    
 font-size:11px;    
 opacity:1;    
 max-width:700px
}
#scrollToTop,.copy-toast
{
position:fixed;    
 bottom:28px;    
 display:flex;    
 opacity:0;    
 pointer-events:none
}
#scrollToTop
{
right:20px;    
 width:50px;    
 height:50px;    
 color:#fff;    
 border:none;    
 border-radius:10px;    
 box-shadow:0 8px 20px var(--clr-primary-btn-glow);    
 align-items:center;    
 justify-content:center;    
 font-size:1.4rem;    
 cursor:pointer;    
 visibility:hidden;    
 transition:opacity var(--t-slow),visibility var(--t-slow),transform var(--t-fast),background var(--t-fast);    
 z-index:999
}
#scrollToTop.visible
{
opacity:1;    
 visibility:visible;    
 pointer-events:auto
}
#scrollToTop:hover
{
background:#049404;    
 transform:scale(1.1) translateY(-2px)
}
.copy-toast
{
left:50%;    
 transform:translateX(-50%) translateY(20px);    
 background:var(--clr-surface-alt);    
 color:var(--clr-text);    
 padding:var(--sp-3) var(--sp-6);    
 border-radius:var(--r-full);    
 font-size:var(--fs-sm);    
 font-weight:500;    
 border:1px solid var(--clr-primary);    
 box-shadow:var(--shadow-xl);    
 align-items:center;    
 gap:var(--sp-2);    
 transition:opacity .2s,transform .2s;    
 z-index:9999;    
 white-space:nowrap
}
.copy-toast svg
{
color:var(--clr-success);    
 flex-shrink:0
}
.copy-toast.show
{
opacity:1;    
 transform:translateX(-50%) translateY(0)
}
@media (max-width:700px)
{
.search-form
{
position:fixed;    
 top:var(--nav-h);    
 left:0;    
 right:0;    
 width:100%;    
 border-radius:0;    
 border-left:none;    
 border-right:none;    
 min-width:auto
}
.search-form-inner

{

margin:12px
}
.search-results
{
margin:0 12px 12px
}
.install-btn span
{
display:inline
}
.seo-section h2.seo-h2
{
font-size:1.5rem}.seo-section h3
{
font-size:1.2rem
}
.type-row
{
flex-wrap:wrap;    
 padding:var(--sp-4)
}
.type-example
{
width:100%;    
 white-space:normal;    
 margin-top:var(--sp-2)
}
.ff-section-grid,
.footer-top-inner,
.gender-grid,
.platform-grid,
.seo-intro-grid,
.steps-grid,.styles-grid,
.testimonials-grid,
.tips-grid
{
grid-template-columns:1fr
}
.menu-toggle,.nav-links.active
{
display:flex
}
.nav-links,
.resp-sharing-button span,
.seo-intro-card
{
display:none
}
.nav-links
{
flex-direction:column;    
 align-items:stretch;    
 background:var(--clr-surface);    
 position:absolute;    
 top:var(--nav-h);    
 left:0;    
 right:0;    
 padding:var(--sp-4);    
 border-bottom:1px solid var(--clr-border);    
 z-index:400
}
.dropdown-menu,.ff-examples-box
{
position:static
}
.nav-links li
{
width:100%
}
.nav-link
{
padding:var(--sp-3) var(--sp-4)
}
.dropdown-menu
{
border:none;    
 box-shadow:none;    
 background:var(--clr-surface-alt);    
 max-height:200px;    
 border-radius:var(--r-md);    
 margin-top:var(--sp-1)
}
.hero
{
padding:var(--sp-10) 0 var(--sp-6)
}
.hero-stats
{
gap:var(--sp-5)
}
.input-section-wrapper
{
padding:var(--sp-2) 0
}
.name-input
{
font-size:.95rem;    
 min-height:42px
}
.reset-btn
{
width:42px;    
 height:42px
}
.resp-sharing-button
{
padding:6px 8px
}
.input-bottom-bar
{
flex-direction:column;    
 align-items:stretch
}
.categories-bar
{
justify-content:flex-start;    
 overflow-x:auto;    
 padding-bottom:4px
}
.share-row

{

  justify-content:center
}
.footer-top-inner

{

  gap:var(--sp-8)
}
#scrollToTop
{
  width:44px;    
 height:44px;    
 right:14px;    
 bottom:20px
}
}
@media (min-width:701px) and (max-width:1024px)
{
  .platform-grid,
  .tips-grid
  {
    grid-template-columns:repeat(2,1fr)
  }
  .ff-section-grid
  {
    grid-template-columns:1fr
  }
  .ff-examples-box
  {position:static
  }
  .footer-top-inner
  {
    grid-template-columns:1fr 1fr
  }
}
@media (prefers-reduced-motion:reduce)
{
  *,
  ::after,
  ::before
  {
    animation-duration:0s!important;    
 transition-duration:0s!important;    
 scroll-behavior:auto!important
}
}
@media print
 {
  .style-card,body
  {
    background:#fff;    
 color:#000
}
#scrollToTop,
.copy-toast,
.hero-stats,
.input-section-wrapper,
.share-row,
.site-footer,
.site-header,
.skip-nav
{
  display:none!important
}
.style-card
{
  border:1px solid #ccc;    
 break-inside:avoid
}
.styles-grid
 {grid-template-columns:repeat(2,1fr)
}
}
.def-grid,.platform-mini-grid
{
  display:grid;    
 overflow-x:hidden
}.styles-grid
{
  min-height:260px
}.def-grid
{
  grid-template-columns:repeat(3,1fr);    
 gap:var(--sp-5);    
 margin:var(--sp-6) 0 var(--sp-4)
}
.def-card
{
  background:var(--clr-surface);    
 border:1px solid var(--clr-border);    
 border-radius:var(--r-xl);    
 padding:var(--sp-5);    
 transition:border-color var(--t-normal),box-shadow var(--t-normal);    
 min-width:0;    
 word-break:break-word
}
.highlight-box,.platform-mini-item
{
  background:var(--clr-surface-alt);    
 word-break:break-word
}
.def-card h4
{
  color:var(--clr-text-heading);    
 font-size:var(--fs-base);    
 font-weight:700;    
 margin-bottom:var(--sp-3);    
 display:flex;    
 align-items:center;    
 gap:var(--sp-2)
    }
    .def-card p
    {
 color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 line-height:1.7;    
 margin:0;    
 word-break:break-word
}
.def-card strong
{
  color:var(--clr-text);    
 word-break:break-word
}
.highlight-box
{
  border-left:4px solid var(--clr-primary);    
 border-radius:var(--r-lg);    
 padding:var(--sp-5) var(--sp-6);    
 margin:var(--sp-6) 0;    
 overflow-x:hidden
    }
    .highlight-box h4
    {
 color:var(--clr-primary-light);    
 font-size:var(--fs-md);    
 font-weight:700;    
 margin-bottom:var(--sp-3)
    }
    .highlight-box p
    {
 color:var(--clr-text-muted);    
 font-size:var(--fs-sm);    
 line-height:1.7;    
 margin:0;    
 word-break:break-word
    }
    .platform-mini-grid
    {
 grid-template-columns:repeat(4,1fr);    
 gap:var(--sp-2);    
 margin:var(--sp-4) 0
    }
    .platform-mini-item
    {
 border-radius:var(--r-full);    
 padding:var(--sp-1) var(--sp-3);    
 font-size:var(--fs-xs);    
 color:var(--clr-text-nav);    
 display:flex;    
 align-items:center;    
 gap:var(--sp-1);    
 white-space:normal;    
 line-height:1.4;    
 text-align:left;    
 min-width:0}
 .platform-mini-item span
 {
   font-size:1rem;    
 flex-shrink:0
    }
    @media (max-width:700px)
 {
   .styles-grid
   {
min-height:480px
   }
   .def-grid
   {
grid-template-columns:1fr
   }
   .highlight-box
   {
padding:var(--sp-4)
   }
   .platform-mini-grid
   {
grid-template-columns:repeat(2,1fr)
   }
 }
 @media (max-width:400px)
 {
   .platform-mini-grid
   {
grid-template-columns:1fr
   }
 }
 .seo-content-wrapper a
 {
   color:#c084fc!important;    
 text-decoration:underline!important;    
 text-underline-offset:2px
    }
.hero-title,.hero-title-sub
{
 font-family:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif!important;    
 font-display:optional!important
  }