:root {
      --fuwari-bg: #eef4f9;
      --fuwari-card-bg: #ffffff;
      --fuwari-primary: #1890ff;
      --fuwari-primary-hover: #096dd9;
      --fuwari-primary-soft: #e6f4ff;
      --fuwari-accent-cyan: #0ea5e9;
      --fuwari-text-main: #1e293b;
      --fuwari-text-secondary: #475569;
      --fuwari-text-muted: #64748b;
      --fuwari-border: #e2e8f0;
      --fuwari-radius: 16px;
      --fuwari-shadow: 0 4px 20px -2px rgba(24, 144, 255, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
      --fuwari-shadow-hover: 0 10px 28px -4px rgba(24, 144, 255, 0.13), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
    }

    body {
      background-color: var(--fuwari-bg);
      color: var(--fuwari-text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* Glassmorphism Floating Navbar (Fuwari Inspired) */
    .navbar-fuwari {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(226, 232, 240, 0.85);
      box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
      transition: all 0.25s ease;
    }

    .brand-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #1890ff 0%, #38bdf8 100%);
      color: #ffffff;
      font-weight: 700;
      box-shadow: 0 3px 10px rgba(24, 144, 255, 0.25);
    }

    .nav-link-fuwari {
      color: var(--fuwari-text-secondary);
      font-weight: 500;
      padding: 0.5rem 0.95rem !important;
      border-radius: 10px;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .nav-link-fuwari:hover,
    .nav-link-fuwari.active {
      color: var(--fuwari-primary) !important;
      background-color: var(--fuwari-primary-soft);
    }

    /* Hero Banner */
    .hero-wrapper {
      position: relative;
      border-radius: 0 0 28px 28px;
      overflow: hidden;
      max-width: 1320px;
      margin: 0 auto 1.75rem auto;
      box-shadow: var(--fuwari-shadow);
      background-color: #bae6fd;
    }

    .hero-banner-img {
      width: 100%;
      height: 330px;
      object-fit: cover;
      object-position: center center;
      display: block;
    }

    .hero-vector-svg {
      width: 100%;
      height: 330px;
      display: block;
      background: linear-gradient(135deg, #24588a 0%, #164370 52%, #0c2b4d 100%);
    }

    .hero-top-actions {
      position: absolute;
      top: 1rem;
      right: 1.25rem;
      z-index: 5;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .btn-hero-glass {
      background: rgba(15, 23, 42, 0.38);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.35);
      color: #ffffff;
      font-size: 0.78rem;
      padding: 0.32rem 0.75rem;
      border-radius: 999px;
      transition: all 0.2s ease;
    }

    .btn-hero-glass:hover {
      background: rgba(24, 144, 255, 0.75);
      border-color: rgba(255, 255, 255, 0.7);
      color: #ffffff;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(10, 28, 52, 0.58) 0%, rgba(10, 28, 52, 0.22) 52%, rgba(10, 28, 52, 0.02) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 2rem 2.25rem;
      color: #ffffff;
      pointer-events: none;
    }

    .hero-subtitle-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      background: rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: #ffffff;
      padding: 0.3rem 0.85rem;
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 500;
      width: fit-content;
      margin-bottom: 0.65rem;
    }

    /* ICP Notice Alert Banner */
    .icp-purpose-banner {
      background: linear-gradient(90deg, #ffffff 0%, #f0f9ff 100%);
      border: 1px solid #bae6fd;
      border-left: 5px solid var(--fuwari-primary);
      border-radius: var(--fuwari-radius);
      padding: 1rem 1.35rem;
      box-shadow: var(--fuwari-shadow);
      margin-bottom: 1.5rem;
    }

    /* Fuwari Cards */
    .fuwari-card {
      background: var(--fuwari-card-bg);
      border-radius: var(--fuwari-radius);
      border: 1px solid rgba(226, 232, 240, 0.85);
      box-shadow: var(--fuwari-shadow);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .fuwari-card-interactive:hover {
      transform: translateY(-3px);
      box-shadow: var(--fuwari-shadow-hover);
      border-color: #93c5fd;
    }

    /* Left Profile Sidebar */
    .profile-avatar-wrap {
      position: relative;
      width: 104px;
      height: 104px;
      margin: 0 auto 0.85rem auto;
    }

    .profile-avatar {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #ffffff;
      box-shadow: 0 4px 14px rgba(24, 144, 255, 0.2);
    }

    .profile-status-dot {
      position: absolute;
      bottom: 4px;
      right: 4px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .stat-box {
      padding: 0.55rem 0.25rem;
      border-radius: 12px;
      background-color: #f8fafc;
      border: 1px solid #f1f5f9;
      text-align: center;
    }

    .stat-num {
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--fuwari-primary);
      line-height: 1.2;
    }

    .stat-label {
      font-size: 0.75rem;
      color: var(--fuwari-text-muted);
    }

    /* Category & Tag Pills */
    .cat-filter-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.52rem 0.85rem;
      border: none;
      background: transparent;
      border-radius: 10px;
      color: var(--fuwari-text-secondary);
      font-size: 0.9rem;
      font-weight: 500;
      transition: all 0.18s ease;
      text-align: left;
    }

    .cat-filter-btn:hover,
    .cat-filter-btn.active {
      background-color: var(--fuwari-primary-soft);
      color: var(--fuwari-primary);
    }

    .cat-count-badge {
      background-color: #f1f5f9;
      color: var(--fuwari-text-muted);
      font-size: 0.75rem;
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      font-weight: 600;
    }

    .cat-filter-btn.active .cat-count-badge {
      background-color: var(--fuwari-primary);
      color: #ffffff;
    }

    .tech-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.78rem;
      padding: 0.25rem 0.65rem;
      border-radius: 8px;
      background-color: #f1f5f9;
      color: var(--fuwari-text-secondary);
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.18s ease;
      user-select: none;
    }

    .tech-tag:hover,
    .tech-tag.active {
      background-color: var(--fuwari-primary-soft);
      color: var(--fuwari-primary);
      border-color: #93c5fd;
    }

    /* Post Cards */
    .post-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.78rem;
      padding: 0.2rem 0.65rem;
      border-radius: 6px;
      font-weight: 600;
      background-color: var(--fuwari-primary-soft);
      color: var(--fuwari-primary);
    }

    .post-title-link {
      color: var(--fuwari-text-main);
      text-decoration: none;
      font-weight: 700;
      font-size: 1.15rem;
      transition: color 0.18s ease;
      cursor: pointer;
    }

    .post-title-link:hover {
      color: var(--fuwari-primary);
    }

    /* Code Blocks */
    .code-snippet-box {
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 1rem;
      font-family: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
      font-size: 0.83rem;
      color: #0f172a;
      overflow-x: auto;
      white-space: pre;
      line-height: 1.55;
    }

    /* Timeline Styling */
    .timeline-container {
      position: relative;
      padding-left: 1.5rem;
    }

    .timeline-container::before {
      content: "";
      position: absolute;
      left: 6px;
      top: 6px;
      bottom: 6px;
      width: 2px;
      background: linear-gradient(180deg, #1890ff 0%, #bae6fd 100%);
      border-radius: 2px;
    }

    .timeline-item {
      position: relative;
      padding-bottom: 1.35rem;
    }

    .timeline-item:last-child {
      padding-bottom: 0;
    }

    .timeline-dot {
      position: absolute;
      left: -1.5rem;
      top: 0.35rem;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid var(--fuwari-primary);
      box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15);
    }

    /* Footer ICP Styling */
    .footer-icp {
      background: #ffffff;
      border-top: 1px solid var(--fuwari-border);
      color: var(--fuwari-text-secondary);
      font-size: 0.86rem;
    }

    .icp-link {
      color: var(--fuwari-text-secondary);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.18s ease;
    }

    .icp-link:hover {
      color: var(--fuwari-primary);
      text-decoration: underline;
    }

    /* Toast Notification */
    .toast-container-custom {
      position: fixed;
      bottom: 1.25rem;
      right: 1.25rem;
      z-index: 1090;
    }

    @media (max-width: 767.98px) {
      .hero-banner-img {
        height: 220px;
      }
      .hero-overlay {
        padding: 1.25rem 1.25rem;
      }
    }