#pc-embed { -webkit-font-smoothing:antialiased; font-family: var(--font-body, system-ui), sans-serif; }
    @keyframes fx-ping { 0% { transform: scale(0.4); opacity: 0.9; } 80% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } }
    @keyframes fx-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @keyframes fx-type { 0% { width: 0; } 12% { width: 0; } 55% { width: 110px; } 100% { width: 110px; } }
    @keyframes fx-attack { 0% { opacity: 0; transform: translateX(90px); } 18% { opacity: 0; transform: translateX(90px); } 26% { opacity: 1; transform: translateX(20px); } 34% { transform: translateX(0); } 40% { transform: translateX(9px); } 60% { opacity: 1; transform: translateX(9px); } 72% { opacity: 0; transform: translateX(50px); } 100% { opacity: 0; transform: translateX(50px); } }
    @keyframes fx-check { 0% { opacity: 0; transform: scale(0); } 20% { opacity: 0; transform: scale(0); } 26% { opacity: 1; transform: scale(1.3); } 30% { transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 94% { opacity: 0; } 100% { opacity: 0; } }
    @keyframes fx-rowin { 0% { opacity: 0; transform: translateX(-16px); } 7% { opacity: 1; transform: translateX(0); } 86% { opacity: 1; transform: translateX(0); } 94% { opacity: 0; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } }
    @keyframes fx-verdict { 0% { opacity: 0; transform: scale(0); } 12% { opacity: 0; transform: scale(0); } 17% { opacity: 1; transform: scale(1.35); } 21% { transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 94% { opacity: 0; } 100% { opacity: 0; } }
    @keyframes fx-toast { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 30% { opacity: 0; transform: translateY(8px) scale(0.9); } 36% { opacity: 1; transform: translateY(0) scale(1); } 80% { opacity: 1; transform: translateY(0) scale(1); } 88% { opacity: 0; transform: translateY(-6px) scale(0.95); } 100% { opacity: 0; } }
    @keyframes fx-burst { 0% { opacity: 0; transform: translate(var(--fx,0px), var(--fy,0px)) scale(0.2); } 14% { opacity: 0; transform: translate(var(--fx,0px), var(--fy,0px)) scale(0.2); } 30% { opacity: 1; transform: translate(0,0) scale(1.06); } 36% { transform: translate(0,0) scale(1); } 82% { opacity: 1; transform: translate(0,0) scale(1); } 92% { opacity: 0; transform: translate(var(--fx,0px), var(--fy,0px)) scale(0.2); } 100% { opacity: 0; transform: translate(var(--fx,0px), var(--fy,0px)) scale(0.2); } }
    @keyframes fx-cardpulse { 0% { transform: scale(1); } 14% { transform: scale(1); } 20% { transform: scale(0.9); } 30% { transform: scale(1.04); } 38% { transform: scale(1); } 100% { transform: scale(1); } }
    .bento-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
    .bento-card { cursor:pointer; outline:none; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); }
    .bento-card::after { content:""; position:absolute; inset:0; border-radius:28px; padding:1px; background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(168,85,247,.25)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
    .bento-card:hover { transform:translateY(-6px); box-shadow: 0 20px 44px -8px rgba(88,28,135,.30), inset 0 1px 2px rgba(255,255,255,.9), inset 0 -1px 2px rgba(168,85,247,.3); }
    .bento-card:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
    .motif { transition: transform .6s cubic-bezier(.16,1,.3,1); }
    .bento-card:hover .motif { transform:scale(1.05); }
    .card-expand-icon { position:absolute; top:22px; right:22px; z-index:2; font-size:16px; color:#ADB5BD; transition: color .3s ease; pointer-events:none; }
    .bento-card:hover .card-expand-icon { color: var(--accent); }
    .card-points { display:flex; flex-wrap:wrap; align-content:flex-start; gap:7px; margin-top:2px; min-height:57px; }
    .card-point { display:inline-flex; align-items:center; min-height:25px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:800; line-height:1.15; color:#010347; background:#F4F4F8; border:1px solid rgba(1,3,71,0.16); }

    .pc-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; opacity:1; transition:opacity .35s ease; }
    .bento-card.pc-active .pc-icon { opacity:0; }
    .pc-anim { position:absolute; inset:0; opacity:0; transition:opacity .35s ease; pointer-events:none; }
    .pc-anim, .pc-anim * { animation-play-state:paused !important; }
    .bento-card.pc-active .pc-anim { opacity:1; }
    .bento-card.pc-active .pc-anim, .bento-card.pc-active .pc-anim * { animation-play-state:running !important; }

    .svg-motif { width:100%; height:100%; overflow:visible; }
    .svg-comply .scan-line { stroke:#6D3CCE; stroke-width:4; stroke-linecap:round; }
    .svg-comply .grid-node { fill:#E3D6FF; transform-box:fill-box; transform-origin:center; transition:transform .3s cubic-bezier(.4,0,.2,1), fill .3s cubic-bezier(.4,0,.2,1), opacity .3s ease; opacity:1; }
    .svg-comply .grid-node.active { fill:#6D3CCE; transform:scale(1.4); }
    .svg-comply .grid-node.danger { fill:#FF6B6B; transform:scale(1.4); }
    .svg-comply .grid-node.exploding { fill:#FF6B6B; transform:scale(2.2); opacity:0; transition:transform .38s cubic-bezier(.34,0,.64,1), opacity .38s ease-out; }

    .svg-comply .danger-icon { opacity:0; transition:opacity .25s ease; }
    .svg-comply .danger-icon.show { opacity:1; }

    .svg-comply .glass-icon { opacity:0; transition:transform .55s cubic-bezier(.34,1.2,.4,1), opacity .3s ease; }
    .svg-comply .glass-icon.show { opacity:1; }

    .svg-comply .burst-particle { fill:#FF6B6B; opacity:1; transition:transform .5s cubic-bezier(.34,0,.64,1), opacity .5s ease-out; }

    .svg-comply .ping-ring { fill:none; stroke:#FF6B6B; stroke-width:2.5; opacity:0; transform-box:fill-box; transform-origin:center; }
    .svg-comply .ping-ring.animate { animation: pingPulse 1.15s cubic-bezier(.2,.6,.35,1) infinite; }

    .svg-comply .shock-ring { fill:none; stroke:#FF6B6B; stroke-width:3; opacity:0; transform-box:fill-box; transform-origin:center; transition:transform .45s cubic-bezier(.2,.6,.35,1), opacity .45s ease-out; }

    @keyframes pingPulse {
      0% { transform:scale(0.6); opacity:.55; }
      70% { transform:scale(1.6); opacity:0; }
      100% { transform:scale(1.6); opacity:0; }
    }

    .svg-secure .track { fill:#F7F4FF; stroke:#E3D6FF; stroke-width:2; }
    .svg-secure .blocked .track { stroke:#FFB4C6; }
    .svg-secure .codeline { fill:#6D3CCE; opacity:.4; }
    .svg-secure .status-ok { transform-box:fill-box; transform-origin:center; }
    .svg-secure .status-block { transform-box:fill-box; transform-origin:center; }

    .svg-guard .card-body { fill:#fff; stroke:#6D3CCE; stroke-width:5; stroke-linejoin:round; }
    .svg-guard .card-stripe { stroke:#6D3CCE; stroke-width:3.5; }
    .svg-guard .card-chip { fill:none; stroke:#6D3CCE; stroke-width:3.5; transform-box:fill-box; transform-origin:center; }
    .svg-guard .card-line { stroke:#6D3CCE; stroke-width:3.5; stroke-linecap:round; }

    /* Motif animations only play while the card is hovered */
    .bento-card:hover .svg-secure .status-ok { animation: popIn 3.2s ease-in-out infinite; }
    .bento-card:hover .svg-secure .status-block { animation: blockPulse 3.2s ease-in-out infinite; }
    .bento-card:hover .svg-guard .card-chip { animation:chipPulse 2s ease-in-out infinite alternate; }
    .bento-card:hover .float { animation: float 4.4s ease-in-out infinite; }

    @keyframes popIn { 0%,18%{ transform:scale(0); opacity:0 } 33%{ transform:scale(1.18); opacity:1 } 44%,100%{ transform:scale(1); opacity:1 } }
    @keyframes blockPulse { 0%,18%{ transform:scale(0); opacity:0 } 33%{ transform:scale(1.22); opacity:1 } 44%{ transform:scale(1) } 60%{ transform:scale(1.12) } 72%,100%{ transform:scale(1); opacity:1 } }
    @keyframes chipPulse { 0%{ transform:scale(.92); opacity:.75 } 100%{ transform:scale(1.08); opacity:1 } }
    @keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

    @media (max-width: 880px) {
      .bento-grid { grid-template-columns:1fr; }
    }