@property --orbY  { syntax: "<length>"; inherits: true; initial-value: 0px; }
    @property --inY   { syntax: "<length>"; inherits: true; initial-value: 0px; }
    @property --inS   { syntax: "<number>"; inherits: true; initial-value: 1; }
    @property --outsY { syntax: "<length>"; inherits: true; initial-value: 0px; }
    @property --outsS { syntax: "<number>"; inherits: true; initial-value: 1; }

    .sx12-hero{
      --bg0:#05070F;
      --bg1:#07142B;
      --fg:#EAF0FF;
      --shadow:0 20px 80px rgba(0,0,0,.55);
      --r:22px;
      color:var(--fg);
    }

    .sx12-frame{
      position:relative;
      width:100%;
      margin-inline:auto;
      aspect-ratio:16/9;
      min-height:720px;
      border-radius:var(--r);
      overflow:hidden;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(135deg, var(--bg0), var(--bg1));
      isolation:isolate;
    }

    .sx12-ctl{
      position:absolute;
      bottom:12px;
      right:12px;
      z-index:10;
      border-radius:999px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;
      height:38px;
      padding:0;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(0,0,0,.18);
      border-color: rgba(255,255,255,.22);
    }
    .sx12-ctl i{ font-size:18px; }

    .sx12-bg{ position:absolute; inset:0; }
    .sx12-bg::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1000px 600px at 18% 22%, rgba(120,170,255,.18), transparent 60%),
        radial-gradient(900px 560px at 84% 70%, rgba(140,255,210,.12), transparent 60%),
        radial-gradient(760px 520px at 55% 20%, rgba(255,140,220,.10), transparent 62%),
        linear-gradient(135deg, rgba(255,255,255,.06), transparent 38%, rgba(255,255,255,.04));
    }
    .sx12-bg::after{
      content:"";
      position:absolute; inset:-2px;
      background:
        linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size:72px 72px;
      opacity:.14;
      mask-image:radial-gradient(70% 70% at 50% 55%, #000 55%, transparent 100%);
    }

    .sx12-scene{
      position:absolute;
      inset:clamp(10px, 1.6vw, 18px);
      z-index:2;
      container-type:size;
      container-name:sx12scene;
      padding:clamp(10px, 1.8cqw, 18px);
    }

    .sx12-stage{
      position:absolute;
      inset:0;

      --sx12T: 17s;

      --pad: 12px;
      --gap: clamp(10px, 1.2cqw, 14px);
      --topGap: clamp(8px, 1.0cqw, 12px);
      --bottomGap: clamp(8px, 1.0cqw, 12px);

      --orb: clamp(170px, 18cqw, 300px);
      --cardW: clamp(320px, 34cqw, 560px);

      --outRows: 1;

      --rowH: min(
        clamp(108px, 11cqw, 148px),
        calc((100cqh - (2 * var(--pad)) - (var(--orb) / 2) - (3 * var(--gap)) - 24px) / var(--outRows))
      );

      --outAreaH: calc((var(--outRows) * var(--rowH)) + ((var(--outRows) - 1) * var(--gap)));

      --orbUpTarget: calc(-1 * min(18cqh, 160px));
      --orbUpLimit: calc((50cqh - var(--pad)) - (var(--orb) / 2) - var(--bottomGap) - var(--outAreaH) - 6px);
      --orbUp: min(var(--orbUpTarget), var(--orbUpLimit));

      --inRest: calc(-50cqh + var(--pad) + var(--topGap) + (var(--rowH) / 2));
      --inOff:  calc(-50cqh - (var(--rowH) * 1.2));

      --outsRest: calc(50cqh - var(--pad) - var(--bottomGap) - (var(--outAreaH) / 2));
      --outsFly:  calc(50cqh + var(--outAreaH) + 80px);

      animation: sx12-orb var(--sx12T) ease-in-out infinite;
    }

    .sx12-is-paused .sx12-stage,
    .sx12-is-paused .sx12-orb,
    .sx12-is-paused .sx12-in,
    .sx12-is-paused .sx12-outs,
    .sx12-is-paused .sx12-ring,
    .sx12-is-paused .sx12-glow{
      animation-play-state: paused !important;
    }

    .sx12-orb{
      position:absolute;
      left:50%;
      top:50%;
      width:var(--orb);
      aspect-ratio:1/1;
      transform:translate(-50%, -50%) translateY(var(--orbY));
      border-radius:999px;
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.14), rgba(255,255,255,.02) 55%, rgba(0,0,0,.18) 100%),
        radial-gradient(circle at 40% 30%, rgba(120,170,255,.35), transparent 55%),
        radial-gradient(circle at 65% 65%, rgba(140,255,210,.22), transparent 55%),
        radial-gradient(circle at 55% 50%, rgba(255,140,220,.16), transparent 60%);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 22px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
      overflow:hidden;
      z-index:3;
    }
    .sx12-orbInner{
      position:absolute;
      inset:18%;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.14);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:14px;
    }
    .sx12-logo{
      width:64%;
      height:auto;
      max-height:64%;
      filter:drop-shadow(0 10px 26px rgba(0,0,0,.45)) saturate(1.05);
    }
    .sx12-ring{
      position:absolute;
      inset:10%;
      border-radius:999px;
      border:1px solid rgba(234,240,255,.10);
      box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
      mask-image:conic-gradient(#000 0 26%, transparent 26% 42%, #000 42% 70%, transparent 70% 84%, #000 84% 100%);
      opacity:.8;
      pointer-events:none;
    }
    .sx12-ring--a{ inset:9%;  animation:sx12-spin 10s linear infinite; }
    .sx12-ring--b{ inset:16%; animation:sx12-spin 14s linear infinite reverse; opacity:.62; }

    .sx12-card{
      border-radius:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      box-shadow:0 14px 40px rgba(0,0,0,.28);
      color:rgba(234,240,255,.95);
    }

    .sx12-icon{
      width:16px; height:16px;
      opacity:.92;
      filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
    }

    .sx12-label{ opacity:.85; }

    .sx12-who{
      margin-top:0;
      font-size:12px;
      color:rgba(234,240,255,.78);
      display:flex;
      gap:8px;
      align-items:baseline;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .sx12-recv,
    .sx12-support{
      margin-top:0;
      font-size:12px;
      color:rgba(234,240,255,.78);
      display:-webkit-box;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .sx12-recv{ -webkit-line-clamp: 1; }
    .sx12-support{ margin-top:8px; -webkit-line-clamp: 1; color:rgba(234,240,255,.70); }

    .sx12-textRow{
      margin-top:10px;
      display:flex;
      align-items:flex-start;
      gap:10px;
      width:100%;
    }
    .sx12-flag{
      flex:0 0 auto;
      width:28px;
      aspect-ratio:4/3;
      border-radius:6px;
      overflow:hidden;
      box-shadow:0 10px 22px rgba(0,0,0,.25);
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.10);
      opacity:.95;
    }
    .sx12-textRow .sx12-text{
      flex:1 1 auto;
      min-width:0;
    }

    .sx12-textRow[dir="rtl"]{
      direction:rtl;
      justify-content:flex-end;
      flex-direction:row-reverse;
    }
    .sx12-textRow[dir="rtl"] .sx12-text{
      direction:rtl;
      unicode-bidi:plaintext;
      text-align:right;
    }

    .sx12-text{
      margin-top:0;
      font-size:clamp(12px, 1.25vw, 16px);
      line-height:1.25;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }

    .sx12-meta{
      margin-top:8px;
      font-size:12px;
      color:rgba(234,240,255,.70);
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }
    .sx12-sep{ opacity:.55; }
    .sx12-count{
      display:inline-flex;
      align-items:baseline;
      gap:4px;
      padding:0 8px;
      height:20px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.14);
      color:rgba(234,240,255,.82);
    }
    .sx12-time{ font-variant-numeric: tabular-nums; }

    .sx12-in{
      position:absolute;
      left:50%;
      top:50%;
      width:var(--cardW);
      max-width:var(--cardW);
      padding:12px 14px;
      transform:translate(-50%, -50%) translateY(var(--inY)) scale(var(--inS));
      opacity:0;
      filter:blur(2px);
      z-index:4;
      animation:sx12-in var(--sx12T) ease-in-out infinite;
    }

    .sx12-outs{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%) translateY(var(--outsY)) scale(var(--outsS));
      width:min(100%, 1120px);
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--gap);
      opacity:0;
      filter:blur(2px);
      z-index:2;
      pointer-events:none;
      animation:sx12-outs var(--sx12T) ease-in-out infinite;
    }

    .sx12-out{
      padding:12px 14px;
      min-height:var(--rowH);
    }

    .sx12-glow{
      position:absolute;
      left:50%;
      top:50%;
      width:160vmax;
      height:160vmax;
      transform:translate(-50%, -50%);
      opacity:0;
      background:
        radial-gradient(circle at 50% 50%, rgba(120,170,255,.10), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(140,255,210,.08), transparent 62%),
        radial-gradient(circle at 50% 50%, rgba(255,140,220,.06), transparent 70%);
      filter:blur(10px);
      pointer-events:none;
      animation:sx12-glow var(--sx12T) ease-in-out infinite;
      z-index:1;
    }

    @keyframes sx12-orb{
      0%,42%   { --orbY: 0px; }
      52%,82%  { --orbY: var(--orbUp); }
      90%,100% { --orbY: 0px; }
    }
    @keyframes sx12-in{
      0%   { opacity:0; filter:blur(2px); --inY: var(--inOff);  --inS: .99; }
      12%  { opacity:1; filter:blur(0);   --inY: var(--inRest); --inS: 1; }
      32%  { opacity:1; filter:blur(0);   --inY: var(--inRest); --inS: 1; }
      42%  { opacity:0; filter:blur(2px); --inY: var(--orbY);   --inS: .90; }
      100% { opacity:0; filter:blur(2px); --inY: var(--orbY);   --inS: .90; }
    }
    @keyframes sx12-outs{
      0%,52%  { opacity:0; filter:blur(2px); --outsY: var(--orbY);     --outsS: .95; }
      62%     { opacity:1; filter:blur(0);   --outsY: var(--outsRest); --outsS: 1; }
      82%     { opacity:1; filter:blur(0);   --outsY: var(--outsRest); --outsS: 1; }
      90%     { opacity:0; filter:blur(2px); --outsY: var(--outsFly);  --outsS: .98; }
      100%    { opacity:0; filter:blur(2px); --outsY: var(--outsFly);  --outsS: .98; }
    }
    @keyframes sx12-glow{
      0%,50% { opacity:0; }
      62%    { opacity:.45; }
      82%    { opacity:.18; }
      100%   { opacity:0; }
    }
    @keyframes sx12-spin{ to { transform:rotate(360deg); } }

    @container sx12scene (max-width: 980px){
      .sx12-stage{ --outRows: 2; }
      .sx12-outs{ width:min(100%, 900px); }
    }

    @container sx12scene (max-width: 920px){
      .sx12-frame{
        max-width:none;
        aspect-ratio:auto;
        height:156svh;
        min-height:1066px;
        border-radius:0;
      }

      .sx12-stage{
        --pad: 10px;
        --orb: clamp(150px, 40cqw, 220px);
        --cardW: min(92cqw, 640px);
        --outRows: 3;
      }

      .sx12-outs{
        grid-template-columns: 1fr;
        width: min(92cqw, 640px);
      }

      .sx12-support{ display:none; }
      .sx12-out .sx12-addr{ display:none; }
      .sx12-sep{ display:none; }
      .sx12-icon--addr{ display:none; }
      .sx12-ctl{ top:10px; right:10px; }
    }

    @media (prefers-reduced-motion: reduce){
      .sx12-stage, .sx12-orb, .sx12-in, .sx12-outs, .sx12-ring, .sx12-glow{ animation:none !important; }
      .sx12-in, .sx12-outs{ opacity:1; filter:none; }
      .sx12-in{ transform:translate(-50%, -50%) translateY(calc(-50cqh + 18px + (var(--rowH) / 2))); }
      .sx12-outs{ transform:translate(-50%, -50%) translateY(calc(50cqh - 18px - (var(--outAreaH) / 2))); }
    }