.tl-root{display:flex; flex-direction:column; align-items:center; gap:10px;}
  .tl-svg{display:block; width:100%; height:100%;}

  /* Hex frame (no padding, clips perfectly) */
  .tl-hex-frame{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    /* pointy-top hex clip */
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    isolation:isolate;
  }

  /* subtle glass edge + inner sheen */
  .tl-hex-frame::before{
    content:"";
    position:absolute;
    inset:0;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    border:1px solid rgba(148,163,184,0.22);
    box-shadow: 0 12px 28px rgba(2,6,23,0.10), inset 0 1px 1px rgba(255,255,255,0.10);
    pointer-events:none;
    z-index:2;
  }

  .tl-hex-frame::after{
    content:"";
    position:absolute;
    inset:0;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    background: radial-gradient(120% 140% at 18% 12%, rgba(255,255,255,0.10), rgba(255,255,255,0) 62%);
    opacity: 0.9;
    pointer-events:none;
    z-index:1;
    mix-blend-mode: screen;
  }

  :root[data-theme="dark"] .tl-hex-frame::before{
    border-color: rgba(148,163,184,0.16);
    box-shadow: 0 16px 34px rgba(0,0,0,0.42), inset 0 1px 1px rgba(255,255,255,0.06);
  }

  /* Straight, professional strokes */
  .tl-r .r,
  .tl-p .p{
    stroke-linecap: butt;
    stroke-linejoin: miter;
    transform-origin:50% 50%;
    transform-box:fill-box;
  }

  /* Ring breathing only (no noisy displacement, no stroke-throb) */
  .tl-r .r{
    animation: tlBreath 9s ease-in-out infinite;
  }

  .tl-r .r1{opacity:.34}
  .tl-r .r2{opacity:.32; animation-delay:.15s}
  .tl-r .r3{opacity:.30; animation-delay:.30s}
  .tl-r .r4{opacity:.28; animation-delay:.45s}

  @keyframes tlBreath{
    0%{transform:scale(.990)}
    50%{transform:scale(1.026)}
    100%{transform:scale(.990)}
  }

  /* outward pulse (hex) - clean */
  .tl-p .p{
    opacity:.28;
    animation: tlPulse 8.2s ease-out infinite;
  }
  .tl-p .p2{animation-delay:2.05s}
  .tl-p .p3{animation-delay:4.1s}

  @keyframes tlPulse{
    0%{transform:scale(.76); opacity:.28}
    65%{opacity:.07}
    100%{transform:scale(1.9); opacity:0}
  }

  .tl-logo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.96);
    transform-origin:50% 50%;
    animation: tlLogoPulse 2.4s ease-in-out infinite;
    pointer-events:none;
    z-index:3;
  }
  .tl-logo-canvas{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  /* Video is rendered off-screen (not opacity:0 which Chrome treats as
     "not visibly rendered" and may refuse to autoplay). Positioning it
     with negative offsets + 2x2 size keeps it in the render tree without
     being visible to the user. The canvas above samples its frames. */
  .tl-logo-video-hidden{
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:2px;
    height:2px;
    pointer-events:none;
  }
  @keyframes tlLogoPulse{
    0%{transform:translate(-50%,-50%) scale(.96)}
    50%{transform:translate(-50%,-50%) scale(1.08)}
    100%{transform:translate(-50%,-50%) scale(.96)}
  }