luckiest-co 1.0.32 → 1.0.34

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-qmark.html

@@ -14,14 +14,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-qmk {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Soft glow bloom anchored left-mid */
       #t2-lb-qmk .local-glow {
-        position: absolute; left: 60px; top: 280px;
+        position: absolute; left: calc(var(--safe-l) - 36px); top: calc(var(--safe-t) + 226px);
         width: 600px; height: 420px; border-radius: 50%;
         background: radial-gradient(ellipse at 28% 50%,
           rgba(var(--accent-rgb), 0.20) 0%,
@@ -34,7 +34,7 @@
 
       /* Component wrapper */
       #t2-lb-qmk .wrapper {
-        position: absolute; left: 100px; top: 330px;
+        position: absolute; left: calc(var(--safe-l) + 4px); top: calc(var(--safe-t) + 276px);
         display: flex; flex-direction: row; align-items: flex-start; gap: 28px;
         z-index: 2;
         max-width: 720px;
@@ -44,7 +44,7 @@
       #t2-lb-qmk .qmark {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 160px;
+        font-size: calc(160px * var(--type));
         line-height: 0.8;
         color: var(--accent);
         text-shadow: var(--textglow-accent),
@@ -65,7 +65,7 @@
         font-family: var(--font-display);
         font-weight: var(--wt-semi);
         font-style: italic;
-        font-size: 34px;
+        font-size: calc(34px * var(--type));
         line-height: 1.28;
         letter-spacing: var(--track-snug);
         color: var(--white);
@@ -94,10 +94,19 @@
       #t2-lb-qmk .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         line-height: 1.50;
         color: var(--text-dim);
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-qmk .wrapper, [data-format="square"] #t2-lb-qmk .wrapper {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b); width: auto;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-qmk .local-glow, [data-format="square"] #t2-lb-qmk .local-glow {
+        top: auto; right: auto; left: var(--safe-l); bottom: calc(var(--safe-b) - 80px);
+      }
+      [data-format="vertical"] #t2-lb-qmk [data-slot], [data-format="square"] #t2-lb-qmk [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-quote.html

@@ -14,14 +14,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-quote {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Localized glow - left, behind card */
       #t2-lb-quote .local-glow {
-        position: absolute; left: 50px; top: 280px;
+        position: absolute; left: calc(var(--safe-l) - 30px); top: calc(var(--safe-t) + 226px);
         width: 600px; height: 460px; border-radius: 50%;
         background: radial-gradient(ellipse at 40% 50%,
           rgba(var(--accent-rgb), 0.18) 0%,
@@ -33,7 +33,7 @@
 
       /* Card anchored left */
       #t2-lb-quote .card {
-        position: absolute; left: 80px; top: 300px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 246px);
         width: 540px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -43,14 +43,14 @@
         box-shadow: var(--glass-shadow);
         border-radius: var(--radius);
         padding: 36px 36px 32px;
-        position: absolute; left: 80px; top: 300px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 246px);
         width: 540px;
       }
 
       /* Oversized glowing quotation mark */
       #t2-lb-quote .quote-mark {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 120px; line-height: 0.7;
+        font-size: calc(120px * var(--type)); line-height: 0.7;
         color: var(--accent);
         filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.65))
                 drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.40));
@@ -64,7 +64,7 @@
       #t2-lb-quote .quote-text {
         font-family: var(--font-display); font-style: italic;
         font-weight: var(--wt-semi);
-        font-size: 28px; line-height: 1.5;
+        font-size: calc(28px * var(--type)); line-height: 1.5;
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 22px;
       }
@@ -81,9 +81,18 @@
       }
       #t2-lb-quote .attribution {
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 20px; letter-spacing: 0.04em;
+        font-size: calc(20px * var(--type)); letter-spacing: 0.04em;
         color: var(--accent); text-shadow: var(--textglow-accent);
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-quote .card, [data-format="square"] #t2-lb-quote .card {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-quote .local-glow, [data-format="square"] #t2-lb-quote .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) - 80px);
+      }
+      [data-format="vertical"] #t2-lb-quote [data-slot], [data-format="square"] #t2-lb-quote [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-rating.html

@@ -15,14 +15,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-rate {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Localized glow - right side */
       #t2-lb-rate .local-glow {
-        position: absolute; right: 70px; top: 390px;
+        position: absolute; right: calc(var(--safe-r) - 10px); top: calc(var(--safe-t) + 336px);
         width: 540px; height: 340px; border-radius: 50%;
         background: radial-gradient(ellipse at 50% 50%,
           rgba(var(--accent2-rgb), 0.20) 0%,     /* yellow glow for star */
@@ -34,7 +34,7 @@
 
       /* Glass chip */
       #t2-lb-rate .chip {
-        position: absolute; right: 80px; top: 420px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 366px);
         width: 420px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -71,7 +71,7 @@
       /* Big numeric value - yellow (accent-2) for that rare pop */
       #t2-lb-rate .rating-value {
         font-family: var(--font-mono); font-weight: 700;
-        font-size: 56px; letter-spacing: -0.02em; line-height: 1.0;
+        font-size: calc(56px * var(--type)); letter-spacing: -0.02em; line-height: 1.0;
         background: linear-gradient(110deg,
           #FFFFFF 0%, var(--accent-2) 70%);
         -webkit-background-clip: text; background-clip: text;
@@ -116,9 +116,18 @@
       /* Detail */
       #t2-lb-rate .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 21px; line-height: 1.45; letter-spacing: 0.01em;
+        font-size: calc(21px * var(--type)); line-height: 1.45; letter-spacing: 0.01em;
         color: var(--text-dim);
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-rate .chip, [data-format="square"] #t2-lb-rate .chip {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-rate .local-glow, [data-format="square"] #t2-lb-rate .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 60px); bottom: calc(var(--safe-b) - 60px);
+      }
+      [data-format="vertical"] #t2-lb-rate [data-slot], [data-format="square"] #t2-lb-rate [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-ribbon.html

@@ -14,13 +14,13 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-rib {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
       }
 
       /* Localized glow - right side */
       #t2-lb-rib .local-glow {
-        position: absolute; right: 80px; top: 370px;
+        position: absolute; right: calc(var(--safe-r) - 16px); top: calc(var(--safe-t) + 316px);
         width: 520px; height: 300px; border-radius: 50%;
         background: radial-gradient(ellipse at 60% 50%,
           rgba(var(--accent-rgb), 0.22) 0%,
@@ -32,7 +32,7 @@
 
       /* Wrapper anchored right */
       #t2-lb-rib .wrapper {
-        position: absolute; right: 120px; top: 400px;
+        position: absolute; right: calc(var(--safe-r) + 24px); top: calc(var(--safe-t) + 346px);
         display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
       }
 
@@ -70,7 +70,7 @@
       /* Ribbon label text */
       #t2-lb-rib .ribbon-term {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 32px; letter-spacing: var(--track-snug);
+        font-size: calc(32px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--white); text-shadow: var(--textglow);
         white-space: nowrap; position: relative; z-index: 1;
       }
@@ -105,15 +105,28 @@
 
       #t2-lb-rib .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 20px; line-height: 1.45; color: var(--text-dim);
+        font-size: calc(20px * var(--type)); line-height: 1.45; color: var(--text-dim);
       }
 
       #t2-lb-rib .term {
         font-family: var(--font-display); font-weight: var(--wt-semi);
-        font-size: 22px; color: var(--white); text-shadow: var(--textglow);
+        font-size: calc(22px * var(--type)); color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 3px;
         display: none; /* term is on the ribbon itself; detail-wrap shows detail only */
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-rib .wrapper, [data-format="square"] #t2-lb-rib .wrapper {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b); width: auto;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-rib .local-glow, [data-format="square"] #t2-lb-rib .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 50px);
+      }
+      [data-format="vertical"] #t2-lb-rib [data-slot], [data-format="square"] #t2-lb-rib [data-slot] { white-space: normal; }
+      [data-format="vertical"] #t2-lb-rib .wrapper, [data-format="square"] #t2-lb-rib .wrapper { align-items: flex-start; }
+      [data-format="vertical"] #t2-lb-rib .detail-wrap, [data-format="square"] #t2-lb-rib .detail-wrap,
+      [data-format="vertical"] #t2-lb-rib .detail, [data-format="square"] #t2-lb-rib .detail,
+      [data-format="vertical"] #t2-lb-rib .term, [data-format="square"] #t2-lb-rib .term { text-align: left; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-ringmark.html

@@ -14,14 +14,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-ring {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Local glow centered on the ring */
       #t2-lb-ring .local-glow {
-        position: absolute; left: 160px; top: 380px;
+        position: absolute; left: calc(var(--safe-l) + 64px); top: calc(var(--safe-t) + 326px);
         width: 380px; height: 380px; border-radius: 50%;
         background: radial-gradient(ellipse at 50% 50%,
           rgba(var(--accent-rgb), 0.28) 0%,
@@ -33,7 +33,7 @@
 
       /* SVG ring - anchored left side */
       #t2-lb-ring .ring-svg {
-        position: absolute; left: 170px; top: 390px;
+        position: absolute; left: calc(var(--safe-l) + 74px); top: calc(var(--safe-t) + 336px);
         width: 200px; height: 200px;
         overflow: visible;
       }
@@ -72,13 +72,13 @@
 
       /* Label panel to the right of the ring */
       #t2-lb-ring .label-wrap {
-        position: absolute; left: 400px; top: 440px;
+        position: absolute; left: calc(var(--safe-l) + 304px); top: calc(var(--safe-t) + 386px);
         display: flex; flex-direction: column; gap: 10px;
       }
 
       /* Connector line from ring edge to label */
       #t2-lb-ring .connector-svg {
-        position: absolute; left: 370px; top: 488px;
+        position: absolute; left: calc(var(--safe-l) + 274px); top: calc(var(--safe-t) + 434px);
         width: 40px; height: 2px; overflow: visible;
       }
 
@@ -102,7 +102,7 @@
 
       #t2-lb-ring .term-text {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 30px; letter-spacing: var(--track-snug);
+        font-size: calc(30px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--white); text-shadow: var(--textglow);
         white-space: nowrap;
       }
@@ -122,9 +122,19 @@
 
       #t2-lb-ring .detail-text {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 22px; line-height: 1.45;
+        font-size: calc(22px * var(--type)); line-height: 1.45;
         color: var(--text-dim);
       }
+      /* Vertical and square: the label drops to the bottom of the safe area, the ring and connector ride beside its top. */
+      [data-format="vertical"] #t2-lb-ring .label-wrap, [data-format="square"] #t2-lb-ring .label-wrap {
+        anchor-name: --t2-lb-ring-label;
+        top: auto; left: calc(var(--safe-l) + 230px); bottom: var(--safe-b);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 230px);
+      }
+      [data-format="vertical"] #t2-lb-ring .ring-svg, [data-format="square"] #t2-lb-ring .ring-svg { position-anchor: --t2-lb-ring-label; left: var(--safe-l); top: calc(anchor(top) - 50px); }
+      [data-format="vertical"] #t2-lb-ring .connector-svg, [data-format="square"] #t2-lb-ring .connector-svg { position-anchor: --t2-lb-ring-label; left: calc(var(--safe-l) + 200px); top: calc(anchor(top) + 48px); }
+      [data-format="vertical"] #t2-lb-ring .local-glow, [data-format="square"] #t2-lb-ring .local-glow { top: auto; left: calc(var(--safe-l) - 90px); bottom: calc(var(--safe-b) - 70px); }
+      [data-format="vertical"] #t2-lb-ring [data-slot], [data-format="square"] #t2-lb-ring [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>
@@ -132,6 +142,16 @@
 
       <div class="local-glow"></div>
 
+      <div class="label-wrap">
+        <div class="term-head">
+          <div class="term-bar"></div>
+          <div class="term-text" data-slot="term">Transformer Block</div>
+        </div>
+        <div class="detail-wrap">
+          <div class="detail-text" data-slot="detail">Stacked self-attention + feed-forward layers that encode meaning at each depth.</div>
+        </div>
+      </div>
+
       <!-- Ring SVG: cx/cy = 100,100 in the 200×200 viewBox -->
       <svg class="ring-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
         <!-- Outer halo ring -->
@@ -152,16 +172,6 @@
         <line id="t2-lb-ring-conn" class="conn-line" x1="0" y1="1" x2="40" y2="1" />
       </svg>
 
-      <div class="label-wrap">
-        <div class="term-head">
-          <div class="term-bar"></div>
-          <div class="term-text" data-slot="term">Transformer Block</div>
-        </div>
-        <div class="detail-wrap">
-          <div class="detail-text" data-slot="detail">Stacked self-attention + feed-forward layers that encode meaning at each depth.</div>
-        </div>
-      </div>
-
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-search.html

@@ -14,14 +14,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-search {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Localized glow - left-center, contained */
       #t2-lb-search .local-glow {
-        position: absolute; left: 60px; top: 480px;
+        position: absolute; left: calc(var(--safe-l) - 20px); top: calc(var(--safe-t) + 426px);
         width: 640px; height: 260px; border-radius: 50%;
         background: radial-gradient(ellipse at 50% 50%,
           rgba(var(--accent-rgb), 0.20) 0%,
@@ -33,7 +33,7 @@
 
       /* Wrapper left side */
       #t2-lb-search .wrap {
-        position: absolute; left: 80px; top: 490px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 436px);
         width: 560px;
       }
 
@@ -75,7 +75,7 @@
       /* Blinking cursor in pill */
       #t2-lb-search .pill-text {
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 28px; color: var(--text);
+        font-size: calc(28px * var(--type)); color: var(--text);
         flex: 1;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
       }
@@ -96,10 +96,19 @@
       /* Caption beneath */
       #t2-lb-search .caption {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 20px; line-height: 1.5;
+        font-size: calc(20px * var(--type)); line-height: 1.5;
         color: var(--text-dim);
         padding-left: 6px;
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-search .wrap, [data-format="square"] #t2-lb-search .wrap {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-search .local-glow, [data-format="square"] #t2-lb-search .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 50px);
+      }
+      [data-format="vertical"] #t2-lb-search [data-slot], [data-format="square"] #t2-lb-search [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-sparkchip.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-spark {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -22,7 +22,7 @@
       /* Localized ambient glow behind chip - left side */
       #t2-lb-spark .local-glow {
         position: absolute;
-        left: 50px; top: 430px;
+        left: calc(var(--safe-l) - 30px); top: calc(var(--safe-t) + 376px);
         width: 460px; height: 260px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 35% 55%,
@@ -36,7 +36,7 @@
       /* Chip positioned left-mid */
       #t2-lb-spark .chip {
         position: absolute;
-        left: 80px; top: 454px;
+        left: var(--safe-l); top: calc(var(--safe-t) + 400px);
         padding: 18px 22px 16px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -97,7 +97,7 @@
       #t2-lb-spark .term {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 26px;
+        font-size: calc(26px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -122,7 +122,7 @@
       #t2-lb-spark .value-badge {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         color: var(--accent);
         text-shadow: var(--textglow-accent);
         letter-spacing: 0.04em;
@@ -133,10 +133,19 @@
       #t2-lb-spark .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 19px;
+        font-size: calc(19px * var(--type));
         line-height: 1.40;
         color: var(--text-dim);
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-spark .chip, [data-format="square"] #t2-lb-spark .chip {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b); width: auto;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-spark .local-glow, [data-format="square"] #t2-lb-spark .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-spark [data-slot], [data-format="square"] #t2-lb-spark [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-spec.html

@@ -14,14 +14,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-spec {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Local glow behind panel */
       #t2-lb-spec .local-glow {
-        position: absolute; left: 80px; top: 330px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 276px);
         width: 580px; height: 360px; border-radius: 50%;
         background: radial-gradient(ellipse at 35% 55%,
           rgba(var(--accent-rgb), 0.22) 0%,
@@ -33,7 +33,7 @@
 
       /* Main spec panel */
       #t2-lb-spec .spec-panel {
-        position: absolute; left: 80px; top: 360px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 306px);
         width: 520px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -63,14 +63,14 @@
 
       #t2-lb-spec .spec-title {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 24px; letter-spacing: var(--track-snug);
+        font-size: calc(24px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--white); text-shadow: var(--textglow);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         flex: 1;
       }
 
       #t2-lb-spec .spec-badge {
-        font-family: var(--font-mono); font-size: 11px;
+        font-family: var(--font-mono); font-size: calc(11px * var(--type));
         letter-spacing: var(--track-wide); text-transform: uppercase;
         color: var(--accent); text-shadow: var(--textglow-accent);
         padding: 3px 8px;
@@ -97,7 +97,7 @@
       /* Dashed connector between label and value */
       #t2-lb-spec .spec-row-label {
         font-family: var(--font-mono); font-weight: var(--wt-reg);
-        font-size: 14px; letter-spacing: var(--track-wide);
+        font-size: calc(14px * var(--type)); letter-spacing: var(--track-wide);
         color: var(--text-faint); text-transform: uppercase;
         white-space: nowrap; flex-shrink: 0;
       }
@@ -111,7 +111,7 @@
 
       #t2-lb-spec .spec-row-value {
         font-family: var(--font-display); font-weight: var(--wt-semi);
-        font-size: 22px; letter-spacing: var(--track-snug);
+        font-size: calc(22px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--text);
         white-space: nowrap;
       }
@@ -123,7 +123,7 @@
 
       /* Detail note below panel */
       #t2-lb-spec .detail-wrap {
-        position: absolute; left: 80px; top: 656px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 602px);
         padding: 8px 18px 8px 16px;
         background: rgba(16,22,34,0.40);
         backdrop-filter: blur(10px);
@@ -135,9 +135,21 @@
 
       #t2-lb-spec .detail-text {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 20px; line-height: 1.5;
+        font-size: calc(20px * var(--type)); line-height: 1.5;
         color: var(--text-dim);
       }
+      /* Vertical and square: the detail strip sits on the bottom of the safe area with the spec panel stacked above it. */
+      [data-format="vertical"] #t2-lb-spec .detail-wrap, [data-format="square"] #t2-lb-spec .detail-wrap {
+        anchor-name: --t2-lb-spec-detail;
+        top: auto; left: var(--safe-l); bottom: var(--safe-b);
+        max-width: min(500px, calc(var(--w) - var(--safe-l) - var(--safe-r)));
+      }
+      [data-format="vertical"] #t2-lb-spec .spec-panel, [data-format="square"] #t2-lb-spec .spec-panel {
+        position-anchor: --t2-lb-spec-detail; top: auto; left: var(--safe-l); bottom: calc(anchor(top) + 20px);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-spec .local-glow, [data-format="square"] #t2-lb-spec .local-glow { top: auto; left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 40px); }
+      [data-format="vertical"] #t2-lb-spec [data-slot], [data-format="square"] #t2-lb-spec [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>
@@ -145,6 +157,10 @@
 
       <div class="local-glow"></div>
 
+      <div class="detail-wrap">
+        <div class="detail-text">First natively multimodal model - processes and generates across all three modes in a single forward pass.</div>
+      </div>
+
       <div class="spec-panel">
         <div class="spec-header">
           <div class="spec-icon"></div>
@@ -170,10 +186,6 @@
         </div>
       </div>
 
-      <div class="detail-wrap">
-        <div class="detail-text">First natively multimodal model - processes and generates across all three modes in a single forward pass.</div>
-      </div>
-
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-status.html

@@ -13,13 +13,13 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-status {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
       }
 
       /* Localized glow - left */
       #t2-lb-status .local-glow {
-        position: absolute; left: 80px; top: 460px;
+        position: absolute; left: calc(var(--safe-l) - 16px); top: calc(var(--safe-t) + 406px);
         width: 500px; height: 280px; border-radius: 50%;
         background: radial-gradient(ellipse at 40% 50%,
           rgba(var(--accent-rgb), 0.18) 0%,
@@ -31,7 +31,7 @@
 
       /* Wrapper anchored left */
       #t2-lb-status .wrapper {
-        position: absolute; left: 120px; top: 490px;
+        position: absolute; left: calc(var(--safe-l) + 24px); top: calc(var(--safe-t) + 436px);
         display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
       }
 
@@ -77,7 +77,7 @@
 
       #t2-lb-status .badge-text {
         font-family: var(--font-mono); font-weight: var(--wt-bold);
-        font-size: 22px; letter-spacing: var(--track-wide);
+        font-size: calc(22px * var(--type)); letter-spacing: var(--track-wide);
         text-transform: uppercase;
         color: var(--accent); text-shadow: var(--textglow-accent);
       }
@@ -103,15 +103,24 @@
 
       #t2-lb-status .term {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 26px; letter-spacing: var(--track-snug);
+        font-size: calc(26px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 4px;
       }
 
       #t2-lb-status .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 20px; line-height: 1.45; color: var(--text-dim);
+        font-size: calc(20px * var(--type)); line-height: 1.45; color: var(--text-dim);
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-status .wrapper, [data-format="square"] #t2-lb-status .wrapper {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b); width: auto;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-status .local-glow, [data-format="square"] #t2-lb-status .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 20px); bottom: calc(var(--safe-b) - 50px);
+      }
+      [data-format="vertical"] #t2-lb-status [data-slot], [data-format="square"] #t2-lb-status [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>