luckiest-co 1.0.32 → 1.0.34

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-bslide {
-        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);
       }
@@ -24,7 +24,7 @@
       /* Bloom behind entire component */
       #t2-lt-bslide .local-bloom {
         position: absolute;
-        left: 40px; bottom: 90px;
+        left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 36px);
         width: 560px; height: 260px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 10% 70%,
@@ -39,7 +39,7 @@
       /* Outer anchor wrapper */
       #t2-lt-bslide .anchor {
         position: absolute;
-        left: 80px; bottom: 120px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 66px);
         display: flex; align-items: stretch;
         gap: 0;
         z-index: 2;
@@ -80,7 +80,7 @@
       #t2-lt-bslide .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 38px;
+        font-size: calc(38px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -92,7 +92,7 @@
       #t2-lt-bslide .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -110,6 +110,12 @@
         vertical-align: middle;
         position: relative; top: -1px;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-bslide .anchor, [data-format="square"] #t2-lt-bslide .anchor {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-bslide .local-bloom, [data-format="square"] #t2-lt-bslide .local-bloom { bottom: calc(var(--safe-b) - 30px); }
+      [data-format="vertical"] #t2-lt-bslide [data-slot], [data-format="square"] #t2-lt-bslide [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-brkt {
-        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);
       }
@@ -24,7 +24,7 @@
       /* Localized bloom behind the bracket block */
       #t2-lt-brkt .local-bloom {
         position: absolute;
-        left: 50px; bottom: 100px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 46px);
         width: 540px; height: 230px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 35% 78%,
@@ -39,7 +39,7 @@
       /* Glass backing for the text (inside the brackets) */
       #t2-lt-brkt .glass-inner {
         position: absolute;
-        left: 80px; bottom: 120px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 66px);
         width: 460px;
         padding: 28px 36px 26px;
         background: var(--glass-bg-dark);
@@ -54,7 +54,7 @@
       #t2-lt-brkt .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -66,7 +66,7 @@
       #t2-lt-brkt .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         color: var(--text-dim);
         letter-spacing: 0.01em;
         line-height: 1.3;
@@ -76,7 +76,7 @@
       /* SVG bracket overlay - same position/size as glass-inner */
       #t2-lt-brkt .brackets-svg {
         position: absolute;
-        left: 74px; bottom: 114px;         /* 6px inset for visual padding */
+        left: calc(var(--safe-l) - 6px); bottom: calc(var(--safe-b) + 60px);         /* 6px inset for visual padding */
         width: 472px; height: 136px;        /* matches glass-inner outer size */
         pointer-events: none;
         z-index: 3;
@@ -92,6 +92,19 @@
                 drop-shadow(0 0 16px rgba(var(--accent-rgb),0.50));
         /* stroke-dasharray / stroke-dashoffset controlled by GSAP for draw-in */
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-brkt .glass-inner, [data-format="square"] #t2-lt-brkt .glass-inner {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-brkt .local-bloom, [data-format="square"] #t2-lt-brkt .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-brkt [data-slot], [data-format="square"] #t2-lt-brkt [data-slot] { white-space: normal; }
+      /* the glass grows with the larger type, so the brackets track its box */
+      [data-format="vertical"] #t2-lt-brkt .glass-inner, [data-format="square"] #t2-lt-brkt .glass-inner { anchor-name: --brkt; width: auto; min-width: 460px; }
+      [data-format="vertical"] #t2-lt-brkt .brackets-svg, [data-format="square"] #t2-lt-brkt .brackets-svg {
+        position-anchor: --brkt; width: auto; height: auto;
+        left: calc(anchor(left) - 6px); right: calc(anchor(right) - 6px); top: anchor(top); bottom: calc(anchor(bottom) - 6px);
+      }
+      [data-format="vertical"] #t2-lt-brkt .brk, [data-format="square"] #t2-lt-brkt .brk { vector-effect: non-scaling-stroke; }
     </style>
   </head>
   <body>
@@ -115,7 +128,7 @@
         Total drawn length per bracket: 40 + 40 = 80px → dasharray 80.
         Draw direction set by path winding (GSAP animates dashoffset 80→0).
       -->
-      <svg class="brackets-svg" viewBox="0 0 472 136" xmlns="http://www.w3.org/2000/svg">
+      <svg class="brackets-svg" viewBox="0 0 472 136" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
         <!-- top-left: horizontal then vertical -->
         <path class="brk" id="brk-tl" d="M40,2 L2,2 L2,42"
           stroke-dasharray="80" stroke-dashoffset="80" />

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-brand {
-        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);
       }
@@ -23,7 +23,7 @@
       /* Localized bloom - two-zone: behind brand block and behind name */
       #t2-lt-brand .local-bloom {
         position: absolute;
-        left: 40px; bottom: 80px;
+        left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 26px);
         width: 680px; height: 230px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 30% 80%,
@@ -38,7 +38,7 @@
       /* The combined row */
       #t2-lt-brand .row {
         position: absolute;
-        left: 80px; bottom: 114px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 60px);
         display: flex;
         align-items: stretch;
         gap: 0;
@@ -80,7 +80,7 @@
       #t2-lt-brand .wordmark {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.16em;
         text-transform: uppercase;
         color: var(--accent);
@@ -92,7 +92,7 @@
       #t2-lt-brand .brand-sub {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 13px;
+        font-size: calc(13px * var(--type));
         letter-spacing: 0.12em;
         text-transform: uppercase;
         color: rgba(var(--accent-rgb), 0.65);
@@ -137,7 +137,7 @@
       #t2-lt-brand .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -148,11 +148,17 @@
       #t2-lt-brand .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-brand .row, [data-format="square"] #t2-lt-brand .row {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-brand .local-bloom, [data-format="square"] #t2-lt-brand .local-bloom { bottom: calc(var(--safe-b) - 34px); }
+      [data-format="vertical"] #t2-lt-brand [data-slot], [data-format="square"] #t2-lt-brand [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-bug {
-        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);
       }
@@ -23,7 +23,7 @@
       /* Tiny localized bloom - just a breath of light */
       #t2-lt-bug .local-bloom {
         position: absolute;
-        left: 30px; bottom: 60px;
+        left: calc(var(--safe-l) - 18px); bottom: calc(var(--safe-b) + 6px);
         width: 280px; height: 140px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 80%,
@@ -38,7 +38,7 @@
       /* Bug badge */
       #t2-lt-bug .badge {
         position: absolute;
-        left: 48px; bottom: 72px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 18px);
         width: 168px;
         padding: 16px 18px 14px;
         background: var(--glass-bg-dark);
@@ -78,7 +78,7 @@
       #t2-lt-bug .brand {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 26px;
+        font-size: calc(26px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -96,13 +96,20 @@
       #t2-lt-bug .label {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 15px;
+        font-size: calc(15px * var(--type));
         letter-spacing: 0.03em;
         color: var(--text-dim);
         line-height: 1.3;
         text-transform: uppercase;
         letter-spacing: var(--track-wide);
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-bug .badge, [data-format="square"] #t2-lt-bug .badge {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-bug .local-bloom, [data-format="square"] #t2-lt-bug .local-bloom { bottom: calc(var(--safe-b) - 12px); }
+      [data-format="vertical"] #t2-lt-bug [data-slot], [data-format="square"] #t2-lt-bug [data-slot] { white-space: normal; }
+      [data-format="vertical"] #t2-lt-bug .badge, [data-format="square"] #t2-lt-bug .badge { width: auto; min-width: 168px; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-cap {
-        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 bloom */
       #t2-lt-cap .local-bloom {
         position: absolute;
-        left: 40px; bottom: 80px;
+        left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 26px);
         width: 640px; height: 240px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 38% 78%,
@@ -37,7 +37,7 @@
       /* Capsule wrapper */
       #t2-lt-cap .capsule-wrap {
         position: absolute;
-        left: 80px; bottom: 148px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 94px);
         z-index: 2;
       }
 
@@ -85,7 +85,7 @@
         justify-content: center;
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 32px;
+        font-size: calc(32px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -120,12 +120,21 @@
       #t2-lt-cap .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
         white-space: nowrap;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-cap .capsule-wrap, [data-format="square"] #t2-lt-cap .capsule-wrap {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-cap .local-bloom, [data-format="square"] #t2-lt-cap .local-bloom { bottom: calc(var(--safe-b) - 68px); }
+      [data-format="vertical"] #t2-lt-cap [data-slot], [data-format="square"] #t2-lt-cap [data-slot] { white-space: normal; }
+      /* the pill grows to its name instead of clipping it */
+      [data-format="vertical"] #t2-lt-cap .capsule, [data-format="square"] #t2-lt-cap .capsule { width: auto; min-width: 520px; height: auto; min-height: 68px; display: flex; }
+      [data-format="vertical"] #t2-lt-cap .name, [data-format="square"] #t2-lt-cap .name { position: relative; inset: auto; flex: 1; padding: 10px 40px; text-align: center; line-height: 1.15; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-chbar {
-        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);
       }
@@ -23,7 +23,7 @@
       /* Bloom behind the bar */
       #t2-lt-chbar .local-bloom {
         position: absolute;
-        left: -30px; bottom: 100px;
+        left: calc(var(--safe-l) - 110px); bottom: calc(var(--safe-b) + 46px);
         width: 700px; height: 240px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 30% 80%,
@@ -38,7 +38,7 @@
       /* Stack: pill → bar */
       #t2-lt-chbar .stack {
         position: absolute;
-        left: 80px; bottom: 118px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 64px);
         display: flex; flex-direction: column;
         align-items: flex-start; gap: 8px;
         z-index: 2;
@@ -66,7 +66,7 @@
 
       #t2-lt-chbar .chapter-num {
         font-family: var(--font-mono);
-        font-size: 18px;
+        font-size: calc(18px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.12em;
         color: var(--accent);
@@ -112,7 +112,7 @@
       #t2-lt-chbar .title {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 38px;
+        font-size: calc(38px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -125,6 +125,13 @@
         color: var(--accent);
         text-shadow: var(--textglow-accent);
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-chbar .stack, [data-format="square"] #t2-lt-chbar .stack {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-chbar .local-bloom, [data-format="square"] #t2-lt-chbar .local-bloom { bottom: calc(var(--safe-b) - 18px); }
+      [data-format="vertical"] #t2-lt-chbar [data-slot], [data-format="square"] #t2-lt-chbar [data-slot] { white-space: normal; }
+      [data-format="vertical"] #t2-lt-chbar .title-bar, [data-format="square"] #t2-lt-chbar .title-bar { width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-chip {
-        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 bloom */
       #t2-lt-chip .local-bloom {
         position: absolute;
-        left: 54px; bottom: 120px;
+        left: calc(var(--safe-l) - 26px); bottom: calc(var(--safe-b) + 66px);
         width: 480px; height: 160px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 35% 80%,
@@ -37,7 +37,7 @@
       /* Chip */
       #t2-lt-chip .chip {
         position: absolute;
-        left: 80px; bottom: 140px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 86px);
         display: flex;
         align-items: center;
         gap: 16px;
@@ -81,7 +81,7 @@
       #t2-lt-chip .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 32px;
+        font-size: calc(32px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -92,11 +92,17 @@
       #t2-lt-chip .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         color: var(--text-dim);
         letter-spacing: 0.01em;
         white-space: nowrap;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-chip .chip, [data-format="square"] #t2-lt-chip .chip {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-chip .local-bloom, [data-format="square"] #t2-lt-chip .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-chip [data-slot], [data-format="square"] #t2-lt-chip [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-cine {
-        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);
       }
@@ -40,7 +40,7 @@
         position: absolute;
         left: 0; bottom: 130px;
         width: 900px;
-        padding: 26px 72px 24px 80px;
+        padding: 26px 72px 24px calc(var(--safe-l) + 12px);
         background: linear-gradient(90deg,
           rgba(10, 14, 20, 0.82) 0%,
           rgba(16, 22, 34, 0.68) 55%,
@@ -92,7 +92,7 @@
       #t2-lt-cine .name {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 42px;
+        font-size: calc(42px * var(--type));
         letter-spacing: var(--track-tight);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -104,7 +104,7 @@
       #t2-lt-cine .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.025em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -124,6 +124,18 @@
         box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.70),
                     0 0 32px rgba(var(--accent-rgb), 0.35);
       }
+      /* Vertical and square: strip spans the frame on the safe bottom, text inside the safe width, slots
+         wrap; the hairlines frame the strip's top and bottom edges. */
+      [data-format="vertical"] #t2-lt-cine .strip, [data-format="square"] #t2-lt-cine .strip {
+        anchor-name: --cine; bottom: var(--safe-b);
+        width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 12px); padding-right: var(--safe-r);
+      }
+      [data-format="vertical"] #t2-lt-cine .local-bloom, [data-format="square"] #t2-lt-cine .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-cine .hairlines, [data-format="square"] #t2-lt-cine .hairlines {
+        position-anchor: --cine; top: anchor(top); bottom: anchor(bottom); left: anchor(left); width: anchor-size(width);
+      }
+      [data-format="vertical"] #t2-lt-cine .hl-bot, [data-format="square"] #t2-lt-cine .hl-bot { bottom: 0 !important; }
+      [data-format="vertical"] #t2-lt-cine [data-slot], [data-format="square"] #t2-lt-cine [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>
@@ -135,15 +147,15 @@
 
       <div class="local-bloom"></div>
 
-      <div class="hairlines">
-        <span class="hl-top"></span>
-        <span class="hl-bot" style="bottom:-96px;"></span>
-      </div>
 
       <div class="strip">
         <div class="name" data-slot="name">Marcus J. Holloway</div>
         <div class="role" data-slot="role">Lead AI Curriculum Designer · ACME Academy</div>
       </div>
+      <div class="hairlines">
+        <span class="hl-top"></span>
+        <span class="hl-bot" style="bottom:-96px;"></span>
+      </div>
 
     </div>
 

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-cite {
-        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);
       }
@@ -24,7 +24,7 @@
       /* Bloom behind component */
       #t2-lt-cite .local-bloom {
         position: absolute;
-        left: 40px; bottom: 80px;
+        left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 26px);
         width: 680px; height: 260px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 25% 75%,
@@ -39,7 +39,7 @@
       /* Outer wrapper */
       #t2-lt-cite .wrap {
         position: absolute;
-        left: 80px; bottom: 112px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 58px);
         width: 820px;
         display: flex; align-items: flex-start; gap: 22px;
         z-index: 2;
@@ -50,7 +50,7 @@
         flex-shrink: 0;
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 120px;
+        font-size: calc(120px * var(--type));
         line-height: 0.72;
         color: var(--accent);
         text-shadow: var(--textglow-accent);
@@ -88,7 +88,7 @@
         font-family: var(--font-display);
         font-style: italic;
         font-weight: var(--wt-semi);
-        font-size: 26px;
+        font-size: calc(26px * var(--type));
         line-height: 1.45;
         letter-spacing: var(--track-snug);
         color: var(--text);
@@ -99,7 +99,7 @@
       #t2-lt-cite .attribution {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         letter-spacing: 0.02em;
         color: var(--text-dim);
         padding-left: 28px;
@@ -113,6 +113,12 @@
         color: var(--accent);
         text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.65);
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-cite .wrap, [data-format="square"] #t2-lt-cite .wrap {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-cite .local-bloom, [data-format="square"] #t2-lt-cite .local-bloom { bottom: calc(var(--safe-b) - 32px); }
+      [data-format="vertical"] #t2-lt-cite [data-slot], [data-format="square"] #t2-lt-cite [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-clock {
-        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);
       }
@@ -23,7 +23,7 @@
       /* Bloom behind the component */
       #t2-lt-clock .local-bloom {
         position: absolute;
-        left: 50px; bottom: 85px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 31px);
         width: 540px; height: 270px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 30% 75%,
@@ -38,7 +38,7 @@
       /* Container - stacks timestamp chip above the name card */
       #t2-lt-clock .container {
         position: absolute;
-        left: 80px; bottom: 110px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 56px);
         display: flex; flex-direction: column;
         align-items: flex-start; gap: 10px;
         z-index: 2;
@@ -69,7 +69,7 @@
 
       #t2-lt-clock .ts-text {
         font-family: var(--font-mono);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.10em;
         color: var(--accent);
@@ -107,13 +107,19 @@
       #t2-lt-clock .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 38px;
+        font-size: calc(38px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
         line-height: 1.1;
         white-space: nowrap;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-clock .container, [data-format="square"] #t2-lt-clock .container {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-clock .local-bloom, [data-format="square"] #t2-lt-clock .local-bloom { bottom: calc(var(--safe-b) - 25px); }
+      [data-format="vertical"] #t2-lt-clock [data-slot], [data-format="square"] #t2-lt-clock [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>