main.guide-page-content{
      --cream: #F3F8FE;
      --panel: #EAF2FB;
      --panel-solid: #FFFFFF;
      --sky: #B9DAFF;
      --sky-deep: #2D6CDF;
      --blush: #FFE59B;
      --blush-deep: #D89B00;
      --mint: #CFEAFF;
      --mint-deep: #1987C7;
      --ink: #102A43;
      --muted: #61758A;
      --line: rgba(16,42,67,0.12);
      --shadow-card: 0 10px 25px -3px rgba(45, 108, 223, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
      --shadow-hover: 0 16px 36px -4px rgba(45, 108, 223, 0.15);
    }main.guide-page-content{
      scroll-behavior: smooth;
      background: var(--cream);
    }main.guide-page-content *{ box-sizing: border-box; margin: 0; padding: 0; }main.guide-page-content{
      font-family: 'Nunito', 'Kanit', 'Outfit', sans-serif;
      background: radial-gradient(circle at 10% 12%, rgba(185, 218, 255, 0.45) 0 140px, transparent 141px),
                  radial-gradient(circle at 90% 28%, rgba(255, 229, 155, 0.35) 0 160px, transparent 161px),
                  linear-gradient(180deg, #f0f7ff 0%, #fdf8ff 25%, #f7faff 60%, #eef5fc 100%);
      color: var(--ink);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }main.guide-page-content .wrap{
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
      width: 100%;
      position: relative;
    }main.guide-page-content /* Top Navigation matching tricksterclassic.com */
    header{
      padding: 16px 0;
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(243, 248, 254, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }main.guide-page-content .site-navbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }main.guide-page-content .logo{
      display: flex;
      align-items: center;
      text-decoration: none;
    }main.guide-page-content .logo img{
      height: 48px;
      width: auto;
      display: block;
      filter: drop-shadow(0 4px 10px rgba(45, 108, 223, 0.2));
      transition: transform 0.2s ease;
    }main.guide-page-content .logo:hover img{
      transform: scale(1.04);
    }main.guide-page-content .navlinks{
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--muted);
    }main.guide-page-content .navlinks a{
      color: var(--muted);
      text-decoration: none;
      padding: 8px 14px;
      border-radius: 999px;
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }main.guide-page-content .navlinks a:hover{
      color: var(--sky-deep);
      background: rgba(45, 108, 223, 0.08);
    }main.guide-page-content .navlinks a.active{
      color: #ffffff;
      background: var(--sky-deep);
      box-shadow: 0 4px 12px rgba(45, 108, 223, 0.25);
    }main.guide-page-content /* Language Switcher */
    .lang-switcher{
      display: inline-flex;
      background: rgba(255, 255, 255, 0.85);
      border: 1.5px solid var(--line);
      border-radius: 999px;
      padding: 4px;
      box-shadow: 0 2px 8px rgba(16, 42, 67, 0.04);
    }main.guide-page-content .lang-btn{
      border: 0;
      background: transparent;
      padding: 6px 14px;
      border-radius: 999px;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 800;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.18s ease;
    }main.guide-page-content .lang-btn.active{
      background: linear-gradient(135deg, #2D6CDF 0%, #1987C7 100%);
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(45, 108, 223, 0.3);
    }main.guide-page-content /* Hero Section */
    .hero-panel{
      padding: 50px 0 30px;
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      align-items: center;
      gap: 32px;
    }main.guide-page-content .eyebrow{
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--sky-deep);
      background: rgba(45, 108, 223, 0.12);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 999px;
      margin-bottom: 16px;
    }main.guide-page-content .hero-title{
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: clamp(32px, 4vw, 46px);
      line-height: 1.15;
      color: var(--ink);
    }main.guide-page-content .hero-title .accent{
      color: var(--sky-deep);
      background: linear-gradient(135deg, #2D6CDF 0%, #D89B00 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }main.guide-page-content .hero-lede{
      color: var(--muted);
      font-size: 16px;
      line-height: 1.7;
      margin-top: 14px;
      max-width: 580px;
    }main.guide-page-content .hero-badges-row{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }main.guide-page-content .meta-chip{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid var(--line);
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }main.guide-page-content .hero-art-side{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }main.guide-page-content .hero-mascot-img{
      max-height: 260px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 14px 28px rgba(16, 42, 67, 0.16));
      animation: floatArt 4.5s ease-in-out infinite alternate;
    }

    @keyframes floatArt {
      0% { transform: translateY(0); }
      100% { transform: translateY(-8px); }
    }main.guide-page-content /* Sticky Control Toolbar */
    .sticky-toolbar{
      position: sticky;
      top: 80px;
      z-index: 90;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(12px);
      border: 1.5px solid var(--line);
      border-radius: 20px;
      padding: 14px 20px;
      margin: 10px 0 32px;
      box-shadow: 0 10px 30px rgba(16, 42, 67, 0.08);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }main.guide-page-content .toolbar-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }main.guide-page-content .tabs-wrapper{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }main.guide-page-content .tab-btn{
      border: 1px solid var(--line);
      background: var(--cream);
      color: var(--muted);
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 800;
      padding: 8px 16px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }main.guide-page-content .tab-btn:hover{
      background: var(--panel-solid);
      color: var(--sky-deep);
      border-color: rgba(45, 108, 223, 0.35);
      transform: translateY(-1px);
    }main.guide-page-content .tab-btn.active{
      background: var(--sky-deep);
      color: #ffffff;
      border-color: var(--sky-deep);
      box-shadow: 0 4px 12px rgba(45, 108, 223, 0.3);
    }main.guide-page-content .search-box-wrap{
      position: relative;
      width: 100%;
      max-width: 380px;
    }main.guide-page-content .search-input{
      width: 100%;
      padding: 10px 18px;
      border-radius: 999px;
      border: 1.5px solid var(--line);
      background: var(--cream);
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      outline: none;
      transition: all 0.2s ease;
    }main.guide-page-content .search-input:focus{
      background: #ffffff;
      border-color: var(--sky-deep);
      box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.15);
    }main.guide-page-content .search-icon{
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 15px;
      color: var(--muted);
      pointer-events: none;
    }main.guide-page-content /* Main Content Sections */
    .view-content{
      display: none;
      flex-direction: column;
      gap: 32px;
      margin-bottom: 60px;
    }main.guide-page-content .view-content.active{
      display: flex;
    }main.guide-page-content .skill-card-panel{
      background: var(--panel-solid);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: box-shadow 0.2s ease;
      scroll-margin-top: 190px;
    }main.guide-page-content .skill-card-panel:hover{
      box-shadow: var(--shadow-hover);
    }main.guide-page-content .skill-card-head{
      padding: 18px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1.5px solid var(--line);
      flex-wrap: wrap;
    }main.guide-page-content .skill-card-title-wrap{
      display: flex;
      align-items: center;
      gap: 14px;
    }main.guide-page-content .skill-card-icon{
      font-size: 28px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }main.guide-page-content .skill-card-heading{
      font-family: 'Baloo 2', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.2;
    }main.guide-page-content .skill-card-sub{
      font-size: 13.5px;
      font-weight: 700;
      color: var(--sky-deep);
      margin-top: 2px;
    }main.guide-page-content .skill-count-badge{
      font-size: 12.5px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: 999px;
      letter-spacing: 0.04em;
    }main.guide-page-content /* Table */
    .table-wrap{
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }main.guide-page-content .wiki-table{
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }main.guide-page-content .wiki-table th{
      background: rgba(45, 108, 223, 0.06);
      padding: 13px 22px;
      font-family: 'Baloo 2', sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--sky-deep);
      border-bottom: 1.5px solid var(--line);
      white-space: nowrap;
    }main.guide-page-content .wiki-table td{
      padding: 13px 22px;
      border-bottom: 1px solid var(--line);
      font-size: 14.5px;
      vertical-align: middle;
      color: var(--ink);
    }main.guide-page-content .wiki-table tbody tr:hover{
      background: rgba(45, 108, 223, 0.04);
    }main.guide-page-content .wiki-table tbody tr:last-child td{
      border-bottom: none;
    }main.guide-page-content .skill-name-col{
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
    }main.guide-page-content .skill-name-bullet{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--sky-deep);
      flex-shrink: 0;
    }main.guide-page-content .skill-name-bullet.bullet-passive{ background: #10b981; }main.guide-page-content .skill-name-bullet.bullet-buff{ background: #8b5cf6; }main.guide-page-content .skill-name-bullet.bullet-debuff{ background: #ef4444; }main.guide-page-content /* Badges */
    .badge-mp{
      display: inline-flex;
      align-items: center;
      font-size: 12.5px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 8px;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      white-space: nowrap;
    }main.guide-page-content .badge-mp.badge-passive{
      background: #ecfdf5;
      color: #047857;
      border-color: #a7f3d0;
    }main.guide-page-content .badge-cd{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12.5px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 8px;
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #fed7aa;
      white-space: nowrap;
    }main.guide-page-content .badge-cd.badge-none{
      background: var(--cream);
      color: var(--muted);
      border-color: var(--line);
    }main.guide-page-content .badge-duration{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12.5px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 8px;
      white-space: nowrap;
    }main.guide-page-content .badge-duration.dur-instant{
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }main.guide-page-content .badge-duration.dur-debuff{
      background: #fff1f2;
      color: #be123c;
      border: 1px solid #fecdd3;
    }main.guide-page-content .badge-duration.dur-buff{
      background: #faf5ff;
      color: #7e22ce;
      border: 1px solid #e9d5ff;
    }main.guide-page-content .badge-duration.dur-permanent{
      background: #f5f3ff;
      color: #5b21b6;
      border: 1px solid #ddd6fe;
    }main.guide-page-content .badge-duration.dur-reactive{
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }main.guide-page-content /* Balance Section */
    .balance-body{
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }main.guide-page-content .changelog-group{
      background: #ffffff;
      border-radius: 18px;
      border: 1px solid var(--line);
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(16, 42, 67, 0.03);
    }main.guide-page-content .changelog-group-header{
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 20px;
      background: linear-gradient(135deg, #f0f7ff 0%, #faf5ff 100%);
      border-bottom: 1px solid var(--line);
    }main.guide-page-content .changelog-group-icon{
      font-size: 20px;
    }main.guide-page-content .changelog-group-title{
      font-family: 'Baloo 2', sans-serif;
      font-size: 16px;
      font-weight: 800;
      color: var(--sky-deep);
    }main.guide-page-content .changelog-entries{
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }main.guide-page-content .sub-label{
      display: inline-flex;
      font-size: 11.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--sky-deep);
      background: rgba(45, 108, 223, 0.08);
      padding: 2px 8px;
      border-radius: 6px;
      width: fit-content;
      margin-top: 6px;
    }main.guide-page-content .changelog-entry{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      line-height: 1.6;
    }main.guide-page-content .tag{
      flex-shrink: 0;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 0.06em;
      padding: 3px 9px;
      border-radius: 999px;
      margin-top: 2px;
      text-transform: uppercase;
    }main.guide-page-content .tag-buff{ background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }main.guide-page-content .tag-balance{ background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }main.guide-page-content .tag-cd{ background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }main.guide-page-content .tag-qol{ background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }main.guide-page-content /* Formulas Grid */
    .formula-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 16px;
      padding: 18px 20px;
    }main.guide-page-content .formula-card{
      background: linear-gradient(135deg, #102a43 0%, #1e3a5f 100%);
      border-radius: 16px;
      padding: 18px 20px;
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(16, 42, 67, 0.25);
      border: 1px solid rgba(185, 218, 255, 0.2);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }main.guide-page-content .formula-badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(45, 108, 223, 0.3);
      color: var(--sky);
      border: 1px solid rgba(185, 218, 255, 0.3);
      width: fit-content;
      text-transform: uppercase;
    }main.guide-page-content .formula-card h4{
      font-size: 16px;
      font-weight: 800;
      color: #ffffff;
    }main.guide-page-content .formula-card p{
      font-size: 13px;
      color: #cbd5e1;
      line-height: 1.5;
    }main.guide-page-content .formula-code{
      background: rgba(0, 0, 0, 0.35);
      border-radius: 8px;
      padding: 10px 14px;
      font-family: 'Consolas', monospace;
      font-size: 13.5px;
      font-weight: 700;
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.25);
      word-break: break-all;
      margin-top: 4px;
    }main.guide-page-content /* Footer matching tricksterclassic.com */
    footer{
      padding: 36px 0 50px;
      border-top: 1px solid var(--line);
      background: rgba(243, 248, 254, 0.6);
      margin-top: auto;
    }main.guide-page-content .foot-row{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--muted);
      font-size: 13.5px;
      font-weight: 700;
      flex-wrap: wrap;
      gap: 16px;
    }main.guide-page-content .footer-tools{
      display: flex;
      align-items: center;
      gap: 14px;
    }main.guide-page-content .social-link{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.85);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
      transition: all 0.15s ease;
    }main.guide-page-content .social-link:hover{
      color: var(--sky-deep);
      border-color: rgba(45, 108, 223, 0.38);
      background: #ffffff;
      transform: translateY(-1px);
    }main.guide-page-content .back-to-top{
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: #ffffff;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 800;
      text-decoration: none;
      transition: all 0.15s ease;
    }main.guide-page-content .back-to-top:hover{
      color: var(--sky-deep);
      border-color: var(--sky-deep);
      transform: translateY(-2px);
    }

    @media (max-width: 800px) {main.guide-page-content .hero-panel{ grid-template-columns: 1fr; text-align: center; gap: 20px; }main.guide-page-content .hero-lede{ margin-left: auto; margin-right: auto; }main.guide-page-content .hero-badges-row{ justify-content: center; }main.guide-page-content .hero-art-side{ display: none; }main.guide-page-content .toolbar-row{ flex-direction: column; align-items: stretch; }main.guide-page-content .search-box-wrap{ max-width: none; }main.guide-page-content .foot-row{ justify-content: center; text-align: center; }
    }
  
main.guide-page-content [data-page-style="page-style-0"]{background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 60%, #fff7ed 100%); border-bottom-color: #fecdd3;}
main.guide-page-content [data-page-style="page-style-1"]{background: #fee2e2; color: #b91c1c;}
main.guide-page-content [data-page-style="page-style-2"]{background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 60%, #e0e7ff 100%); border-bottom-color: #ddd6fe;}
main.guide-page-content [data-page-style="page-style-3"]{background: #ede9fe; color: #6d28d9;}
main.guide-page-content [data-page-style="page-style-4"]{background: linear-gradient(135deg, #ecfdf5 0%, #e0f2fe 60%, #f0fdf4 100%); border-bottom-color: #a7f3d0;}
main.guide-page-content [data-page-style="page-style-5"]{background: #e0f2fe; color: #0369a1;}
main.guide-page-content [data-page-style="page-style-6"]{background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 60%, #fff1f2 100%); border-bottom-color: #fbcfe8;}
main.guide-page-content [data-page-style="page-style-7"]{background: #fce7f3; color: #9d174d;}
main.guide-page-content [data-page-style="page-style-8"]{background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #ffedd5 100%); border-bottom-color: #fde68a;}
main.guide-page-content [data-page-style="page-style-9"]{background: #fef3c7; color: #92400e;}
main.guide-page-content [data-page-style="page-style-10"]{background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%); border-bottom-color: #c7d2fe;}
main.guide-page-content [data-page-style="page-style-11"]{background: #ede9fe; color: #5b21b6;}
main.guide-page-content [data-page-style="page-style-12"]{background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 60%, #fff7ed 100%); border-bottom-color: #fecdd3;}
main.guide-page-content [data-page-style="page-style-13"]{background: #fee2e2; color: #b91c1c;}
main.guide-page-content [data-page-style="page-style-14"]{background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 60%, #e0e7ff 100%); border-bottom-color: #ddd6fe;}
main.guide-page-content [data-page-style="page-style-15"]{background: #ede9fe; color: #6d28d9;}
main.guide-page-content [data-page-style="page-style-16"]{background: linear-gradient(135deg, #ecfdf5 0%, #e0f2fe 60%, #f0fdf4 100%); border-bottom-color: #a7f3d0;}
main.guide-page-content [data-page-style="page-style-17"]{background: #e0f2fe; color: #0369a1;}
main.guide-page-content [data-page-style="page-style-18"]{background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 60%, #fff1f2 100%); border-bottom-color: #fbcfe8;}
main.guide-page-content [data-page-style="page-style-19"]{background: #fce7f3; color: #9d174d;}
main.guide-page-content [data-page-style="page-style-20"]{background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #ffedd5 100%); border-bottom-color: #fde68a;}
main.guide-page-content [data-page-style="page-style-21"]{background: #fef3c7; color: #92400e;}
main.guide-page-content [data-page-style="page-style-22"]{background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%); border-bottom-color: #c7d2fe;}
main.guide-page-content [data-page-style="page-style-23"]{background: #ede9fe; color: #5b21b6;}

/* Mantém o fundo, o hero e os cards no padrão validado da home. */
main.guide-page-content{background:transparent!important;background-image:none!important;min-height:0!important;padding:0!important;display:block!important;gap:0!important;}
main.guide-page-content .hero-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.82fr);align-items:center;gap:22px;margin:20px 0 8px;padding:56px 0 34px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;}
main.guide-page-content .hero-panel>div:first-child{min-width:0;}
main.guide-page-content .hero-title{max-width:680px;margin:0;color:var(--ink);font:800 clamp(30px,4.5vw,50px)/1.12 'Baloo 2',sans-serif;letter-spacing:normal;}
main.guide-page-content .hero-title .accent{color:var(--blush-deep);background:none;-webkit-text-fill-color:var(--blush-deep);}
main.guide-page-content .hero-lede{max-width:580px;margin-top:18px;color:var(--muted);font-size:16px;line-height:1.7;}
main.guide-page-content .eyebrow{display:inline-flex;align-items:center;margin-bottom:20px;padding:6px 16px;border:0;border-radius:999px;background:rgba(45,108,223,.12);color:var(--sky-deep);font:600 13px/1.2 'Baloo 2',sans-serif;letter-spacing:normal;text-transform:none;}
main.guide-page-content .hero-art-side{display:flex!important;min-width:0;justify-content:center;align-items:center;position:relative;}
main.guide-page-content .character-roster{display:flex;align-items:flex-end;justify-content:center;gap:0;width:min(480px,100%);}
main.guide-page-content .character-roster-card{display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;}
main.guide-page-content .character-roster-card img{display:block;width:100%;height:clamp(100px,14vw,168px);object-fit:contain;filter:drop-shadow(0 10px 16px rgba(16,42,67,.12));}
main.guide-page-content .character-roster-card figcaption{color:var(--muted);font:800 10px/1.1 'Nunito',sans-serif;text-align:center;}
main.guide-page-content .feature-card,main.guide-page-content .cmd-category-card,main.guide-page-content .skill-card-panel{position:relative;overflow:visible;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.9);box-shadow:0 18px 44px rgba(16,42,67,.08);}
main.guide-page-content.page-commands .cmd-category-card{z-index:100;}
main.guide-page-content .sticky-toolbar{border-radius:28px;}
main.guide-page-content .feature-card>.feature-card-header,main.guide-page-content .cmd-category-card>.card-head,main.guide-page-content .skill-card-panel>.skill-card-head{border-radius:27px 27px 0 0;}
main.guide-page-content.page-commands .hero-panel,main.guide-page-content.page-features .hero-panel{grid-template-columns:minmax(0,1fr);}
main.guide-page-content.page-skills .hero-panel{grid-template-columns:minmax(0,1fr);}
main.guide-page-content .view-content.active{gap:112px;padding-top:100px;}
main.guide-page-content.page-commands .sticky-toolbar{z-index:40;}
main.guide-page-content.page-commands .view-content.active{position:relative;z-index:50;gap:90px;padding-top:24px;}
main.guide-page-content .container-character{right:18px;left:auto;height:120px;}
main.guide-page-content.page-commands .container-character{z-index:120;}
main.guide-page-content #viewTh .container-character{right:18px;left:auto;}
main.guide-page-content.page-commands .cmd-category-card>.card-head>div{padding-right:112px;}
main.guide-page-content.page-commands .sticky-toolbar .search-box-wrap{max-width:320px;margin-right:0;}
main.guide-page-content.page-features .sticky-toolbar,main.guide-page-content.page-skills .sticky-toolbar{z-index:40;}
main.guide-page-content.page-features .view-content.active,main.guide-page-content.page-skills .view-content.active{position:relative;z-index:50;gap:90px;padding-top:24px;}
main.guide-page-content.page-skills .view-content.active{gap:80px;padding-top:24px;}
main.guide-page-content.page-features .feature-card,main.guide-page-content.page-skills .skill-card-panel{z-index:100;}
main.guide-page-content.page-features .container-character,main.guide-page-content.page-skills .container-character{z-index:120;}
main.guide-page-content .balance-character-roster{display:flex;align-items:flex-end;gap:6px;margin-left:auto;}
main.guide-page-content .balance-character-roster .character-roster-card{width:48px;min-height:68px;padding:4px 3px 5px;border-radius:12px;}
main.guide-page-content .balance-character-roster .character-roster-card img{height:43px;}
main.guide-page-content .balance-character-roster .character-roster-card figcaption{font-size:8px;}
main.guide-page-content .balance-character-roster{display:flex;align-items:flex-end;gap:6px;margin-left:auto;}
main.guide-page-content .balance-character-roster .character-roster-card{width:48px;min-height:68px;padding:4px 3px 5px;border-radius:12px;}
main.guide-page-content .balance-character-roster .character-roster-card img{height:43px;}
main.guide-page-content .balance-character-roster .character-roster-card figcaption{font-size:8px;}
@media(max-width:760px){main.guide-page-content .hero-panel{grid-template-columns:1fr;gap:12px;padding:32px 0 24px;text-align:center;}main.guide-page-content .hero-lede{margin-left:auto;margin-right:auto;}main.guide-page-content .hero-art-side{justify-content:center;}main.guide-page-content .character-roster{width:min(420px,100%);}main.guide-page-content .character-roster-card img{height:clamp(72px,20vw,126px);}main.guide-page-content .view-content.active{gap:90px;padding-top:76px;}main.guide-page-content.page-commands .view-content.active,main.guide-page-content.page-features .view-content.active,main.guide-page-content.page-skills .view-content.active{gap:56px;padding-top:32px;}main.guide-page-content.page-skills .view-content.active{gap:64px;padding-top:32px;}main.guide-page-content .container-character{right:12px;left:auto;height:96px;}main.guide-page-content #viewTh .container-character{right:12px;left:auto;}main.guide-page-content.page-commands .cmd-category-card>.card-head>div{padding-right:84px;}main.guide-page-content.page-commands .sticky-toolbar .search-box-wrap{max-width:none;margin-right:0;}}