luckiest-co 1.0.32 → 1.0.34

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

@@ -15,7 +15,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-tagr {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 54px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +25,7 @@
       /* Localized bloom - wider to span the tag row */
       #t2-lt-tagr .local-bloom {
         position: absolute;
-        left: 40px; bottom: 70px;
+        left: calc(var(--lt-x) - 40px); bottom: calc(var(--lt-y) - 38px);
         width: 760px; height: 220px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 85%,
@@ -38,7 +40,7 @@
       /* Outer stacked layout */
       #t2-lt-tagr .stack {
         position: absolute;
-        left: 80px; bottom: 108px;
+        left: var(--lt-x); bottom: var(--lt-y);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -70,7 +72,7 @@
       #t2-lt-tagr .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);
@@ -116,11 +118,18 @@
       #t2-lt-tagr .tag-text {
         font-family: var(--font-body);
         font-weight: var(--wt-semi);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         letter-spacing: 0.03em;
         color: var(--text);
         line-height: 1;
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-tagr, [data-format="square"] #t2-lt-tagr { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-tagr .stack, [data-format="square"] #t2-lt-tagr .stack {
+        top: auto; width: auto; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-tagr .tag-row, [data-format="square"] #t2-lt-tagr .tag-row { flex-wrap: wrap; }
+      [data-format="vertical"] #t2-lt-tagr [data-slot], [data-format="square"] #t2-lt-tagr [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-thin {
-        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 @@
       /* Diffuse glow bloom along bottom */
       #t2-lt-thin .local-bloom {
         position: absolute;
-        left: 0; bottom: 0;
+        left: 0; bottom: calc(var(--safe-b) - 44px);
         width: 100%; height: 160px;
         background: linear-gradient(0deg,
           rgba(var(--accent-rgb), 0.16) 0%,
@@ -36,8 +36,9 @@
       /* The strip itself */
       #t2-lt-thin .strip {
         position: absolute;
-        left: 0; bottom: 0;
-        width: 1920px;
+        /* full-width strip on the safe bottom, text inside the safe insets */
+        left: 0; bottom: var(--safe-b);
+        width: var(--w); box-sizing: border-box;
         height: 72px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -49,7 +50,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0 72px;
+        padding: 0 var(--safe-r) 0 var(--safe-l);
         z-index: 2;
         overflow: hidden;
       }
@@ -74,7 +75,7 @@
       #t2-lt-thin .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);
@@ -96,7 +97,7 @@
       #t2-lt-thin .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 24px;
+        font-size: calc(24px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.1;
@@ -117,6 +118,15 @@
         box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.70);
         z-index: 5;
       }
+      /* Vertical and square: name over role in a taller strip, the separator dot drops out. */
+      [data-format="vertical"] #t2-lt-thin .strip, [data-format="square"] #t2-lt-thin .strip {
+        height: auto; flex-direction: column; align-items: flex-start; justify-content: center;
+        gap: 10px; padding-top: 20px; padding-bottom: 20px;
+      }
+      [data-format="vertical"] #t2-lt-thin .sep-dot, [data-format="square"] #t2-lt-thin .sep-dot { display: none; }
+      [data-format="vertical"] #t2-lt-thin [data-slot], [data-format="square"] #t2-lt-thin [data-slot] {
+        white-space: normal; text-align: left;
+      }
     </style>
   </head>
   <body>
@@ -155,7 +165,7 @@
 
       /* rule draws left-to-right across the full width */
       tl.to(`${C} .top-rule`,
-        { width: 1920, duration: 0.75, ease: "power3.out" }, 0.44);
+        { width: "100%", duration: 0.75, ease: "power3.out" }, 0.44);
 
       /* name fades/slides in from left */
       tl.from(`${C} .name`,

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

@@ -14,15 +14,17 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-tick {
-        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);
+        /* bottom of the ticker bar; vertical and square move it to the safe bottom */
+        --lt-y: calc(var(--safe-b) + 26px);
       }
 
       /* Localized bloom behind the bar */
       #t2-lt-tick .local-bloom {
         position: absolute;
-        left: 0; bottom: 60px;
+        left: 0; bottom: calc(var(--lt-y) - 20px);
         width: 1000px; height: 100px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 20% 100%,
@@ -37,8 +39,8 @@
       /* Full-width ticker bar */
       #t2-lt-tick .bar {
         position: absolute;
-        left: 0; bottom: 80px;
-        width: 1920px; height: 72px;
+        left: 0; bottom: var(--lt-y);
+        width: var(--w); height: 72px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
         -webkit-backdrop-filter: var(--glass-blur);
@@ -67,7 +69,8 @@
       #t2-lt-tick .flag {
         flex-shrink: 0;
         height: 72px;
-        padding: 0 28px;
+        /* the flag grows out of the left wall; its text starts at the safe inset */
+        padding: 0 28px 0 var(--safe-l);
         background: var(--accent);
         display: flex;
         align-items: center;
@@ -91,7 +94,7 @@
       #t2-lt-tick .flag-text {
         font-family: var(--font-body);
         font-weight: var(--wt-bold);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         letter-spacing: var(--track-wide);
         color: var(--canvas);
         text-transform: uppercase;
@@ -111,6 +114,7 @@
         flex: 1;
         overflow: hidden;
         height: 72px;
+        margin-right: var(--safe-r);
         display: flex;
         align-items: center;
         position: relative;
@@ -135,7 +139,7 @@
       #t2-lt-tick .headline {
         font-family: var(--font-display);
         font-weight: var(--wt-semi);
-        font-size: 30px;
+        font-size: calc(30px * var(--type));
         letter-spacing: 0.01em;
         color: var(--white);
         text-shadow: var(--textglow);
@@ -148,6 +152,24 @@
         color: var(--accent);
         text-shadow: var(--textglow-accent);
       }
+      /* Vertical and square: flag over a wrapping headline in a taller bar on the safe bottom. */
+      [data-format="vertical"] #t2-lt-tick, [data-format="square"] #t2-lt-tick { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-tick .bar, [data-format="square"] #t2-lt-tick .bar {
+        height: auto; flex-direction: column; align-items: flex-start;
+      }
+      [data-format="vertical"] #t2-lt-tick .flag, [data-format="square"] #t2-lt-tick .flag { height: 60px; }
+      [data-format="vertical"] #t2-lt-tick .flag::after, [data-format="square"] #t2-lt-tick .flag::after {
+        right: -15px; border-top-width: 30px; border-bottom-width: 30px; border-left-width: 15px;
+      }
+      [data-format="vertical"] #t2-lt-tick .divider, [data-format="square"] #t2-lt-tick .divider { display: none; }
+      [data-format="vertical"] #t2-lt-tick .scroll-track, [data-format="square"] #t2-lt-tick .scroll-track {
+        flex: none; align-self: stretch; height: auto;
+        margin: 0 var(--safe-r) 0 calc(var(--safe-l) - 20px); padding: 18px 20px 22px 0;
+      }
+      [data-format="vertical"] #t2-lt-tick .scroll-track::before, [data-format="square"] #t2-lt-tick .scroll-track::before,
+      [data-format="vertical"] #t2-lt-tick .scroll-track::after, [data-format="square"] #t2-lt-tick .scroll-track::after { display: none; }
+      [data-format="vertical"] #t2-lt-tick .headline, [data-format="square"] #t2-lt-tick .headline { line-height: 1.25; }
+      [data-format="vertical"] #t2-lt-tick [data-slot], [data-format="square"] #t2-lt-tick [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-tbar {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 54px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -21,7 +23,7 @@
       /* Localized bloom behind the bar */
       #t2-lt-tbar .local-bloom {
         position: absolute;
-        left: 60px; bottom: 82px;
+        left: calc(var(--lt-x) - 20px); bottom: calc(var(--lt-y) - 26px);
         width: 820px; height: 160px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 30% 80%,
@@ -36,7 +38,7 @@
       /* Bar wrapper - clips the wipe */
       #t2-lt-tbar .bar-clip {
         position: absolute;
-        left: 80px; bottom: 108px;
+        left: var(--lt-x); bottom: var(--lt-y);
         width: 800px;
         overflow: hidden;
         border-radius: var(--radius-sm);
@@ -87,7 +89,7 @@
       #t2-lt-tbar .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 34px;
+        font-size: calc(34px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -113,7 +115,7 @@
       #t2-lt-tbar .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.1;
@@ -122,6 +124,18 @@
         text-overflow: ellipsis;
         max-width: 340px;
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-tbar, [data-format="square"] #t2-lt-tbar { --lt-y: var(--safe-b); }
+      /* GSAP wipes the clip's width open, so it stays a fixed width (capped to the safe width). */
+      [data-format="vertical"] #t2-lt-tbar .bar-clip, [data-format="square"] #t2-lt-tbar .bar-clip {
+        width: min(800px, calc(var(--w) - var(--safe-l) - var(--safe-r)));
+      }
+      /* Vertical: name over role. */
+      [data-format="vertical"] #t2-lt-tbar .bar { flex-direction: column; align-items: flex-start; gap: 8px; }
+      [data-format="vertical"] #t2-lt-tbar .divider-dot { display: none; }
+      [data-format="vertical"] #t2-lt-tbar .name { flex: none; }
+      [data-format="vertical"] #t2-lt-tbar .role { max-width: none; padding-left: 16px; }
+      [data-format="vertical"] #t2-lt-tbar [data-slot], [data-format="square"] #t2-lt-tbar [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-trust {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 66px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +25,7 @@
       /* Localized bloom behind the card group */
       #t2-lt-trust .local-bloom {
         position: absolute;
-        left: 48px; bottom: 90px;
+        left: calc(var(--lt-x) - 32px); bottom: calc(var(--lt-y) - 30px);
         width: 580px; height: 340px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 35% 75%,
@@ -38,13 +40,13 @@
       /* Tag chip - floats above the card */
       #t2-lt-trust .tag-chip {
         position: absolute;
-        left: 164px; bottom: 338px;
+        left: calc(var(--lt-x) + 84px); bottom: calc(var(--lt-y) + 218px);
         padding: 7px 18px;
         background: rgba(var(--accent-rgb), 0.15);
         border: 1px solid rgba(var(--accent-rgb), 0.50);
         border-radius: 999px;
         font-family: var(--font-mono);
-        font-size: 17px;
+        font-size: calc(17px * var(--type));
         font-weight: var(--wt-reg);
         letter-spacing: var(--track-wide);
         text-transform: uppercase;
@@ -58,7 +60,7 @@
       /* Main card */
       #t2-lt-trust .card {
         position: absolute;
-        left: 80px; bottom: 120px;
+        left: var(--lt-x); bottom: var(--lt-y);
         width: 460px;
         padding: 22px 28px 24px;
         display: flex;
@@ -118,7 +120,7 @@
       #t2-lt-trust .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 34px;
+        font-size: calc(34px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -128,7 +130,7 @@
       #t2-lt-trust .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         color: var(--text-dim);
         letter-spacing: 0.01em;
         line-height: 1.35;
@@ -137,7 +139,7 @@
       /* Dashed connector line trailing from the right edge of the card */
       #t2-lt-trust .connector {
         position: absolute;
-        left: 540px; bottom: 178px;   /* right edge of card + margin */
+        left: calc(var(--lt-x) + 460px); bottom: calc(var(--lt-y) + 58px);   /* right edge of card + margin */
         width: 160px; height: 2px;
         overflow: visible;
         z-index: 2;
@@ -159,6 +161,12 @@
         background: var(--accent);
         box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.80);
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-trust, [data-format="square"] #t2-lt-trust { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-trust .card, [data-format="square"] #t2-lt-trust .card {
+        top: auto; width: auto; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-trust [data-slot], [data-format="square"] #t2-lt-trust [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-typed {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 74px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -22,7 +24,7 @@
       /* Localized bloom */
       #t2-lt-typed .local-bloom {
         position: absolute;
-        left: 50px; bottom: 90px;
+        left: calc(var(--lt-x) - 30px); bottom: calc(var(--lt-y) - 38px);
         width: 580px; height: 200px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 78%,
@@ -37,7 +39,7 @@
       /* Glass strip */
       #t2-lt-typed .card {
         position: absolute;
-        left: 80px; bottom: 128px;
+        left: var(--lt-x); bottom: var(--lt-y);
         padding: 24px 36px 22px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -72,7 +74,7 @@
       #t2-lt-typed .name {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 38px;
+        font-size: calc(38px * var(--type));
         letter-spacing: 0.03em;
         color: var(--white);
         text-shadow: var(--textglow);
@@ -97,11 +99,17 @@
       #t2-lt-typed .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.2;
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-typed, [data-format="square"] #t2-lt-typed { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-typed .card, [data-format="square"] #t2-lt-typed .card {
+        top: auto; width: auto; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-typed [data-slot], [data-format="square"] #t2-lt-typed [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-ubar {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 94px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +25,7 @@
       /* Very soft bloom - just a warmth under the text, no hard edge */
       #t2-lt-ubar .local-bloom {
         position: absolute;
-        left: 60px; bottom: 100px;
+        left: calc(var(--lt-x) - 28px); bottom: calc(var(--lt-y) - 48px);
         width: 640px; height: 200px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 30% 80%,
@@ -38,14 +40,14 @@
       /* Text block - no card, just text on dark */
       #t2-lt-ubar .text-block {
         position: absolute;
-        left: 88px; bottom: 148px;
+        left: var(--lt-x); bottom: var(--lt-y);
         z-index: 2;
       }
 
       #t2-lt-ubar .name {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 52px;
+        font-size: calc(52px * var(--type));
         letter-spacing: var(--track-tight);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -96,7 +98,7 @@
       #t2-lt-ubar .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 23px;
+        font-size: calc(23px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         margin-top: 12px;
@@ -115,6 +117,12 @@
         vertical-align: middle;
         position: relative; top: -1px;
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-ubar, [data-format="square"] #t2-lt-ubar { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-ubar .text-block, [data-format="square"] #t2-lt-ubar .text-block {
+        top: auto; width: auto; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-ubar [data-slot], [data-format="square"] #t2-lt-ubar [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-wband {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 76px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +25,7 @@
       /* Soft bloom under the unit */
       #t2-lt-wband .local-bloom {
         position: absolute;
-        left: 52px; bottom: 100px;
+        left: calc(var(--lt-x) - 28px); bottom: calc(var(--lt-y) - 30px);
         width: 560px; height: 150px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 25% 90%,
@@ -38,7 +40,7 @@
       /* Outer unit container */
       #t2-lt-wband .unit {
         position: absolute;
-        left: 80px; bottom: 130px;
+        left: var(--lt-x); bottom: var(--lt-y);
         display: flex;
         align-items: center;
         gap: 28px;
@@ -97,7 +99,7 @@
       #t2-lt-wband .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 34px;
+        font-size: calc(34px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -107,7 +109,7 @@
       #t2-lt-wband .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         color: var(--text-dim);
         letter-spacing: 0.01em;
         line-height: 1.3;
@@ -116,7 +118,7 @@
       /* Bottom accent line that spans the full unit */
       #t2-lt-wband .accent-line {
         position: absolute;
-        left: 80px; bottom: 124px;
+        left: var(--lt-x); bottom: calc(var(--lt-y) - 6px);
         width: 0;
         height: 2px;
         background: linear-gradient(90deg,
@@ -127,6 +129,12 @@
         border-radius: 1px;
         z-index: 3;
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-wband, [data-format="square"] #t2-lt-wband { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-wband .unit, [data-format="square"] #t2-lt-wband .unit {
+        top: auto; width: auto; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-wband [data-slot], [data-format="square"] #t2-lt-wband [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/tokens.css

@@ -60,14 +60,21 @@
   --wt-bold:   700;
   --wt-black:  800;
 
-  /* video sizes for 1920x1080 (big - readable in 2s) */
-  --size-mega:     300px;   /* hero stat number */
-  --size-display:  140px;   /* takeover headline */
-  --size-title:    84px;    /* section title */
-  --size-headline: 54px;    /* card headline */
-  --size-body:     32px;    /* supporting copy */
-  --size-label:    24px;    /* kicker / metadata */
-  --size-tiny:     19px;    /* credits, fine print, timestamps */
+  /* --- format (master landscape defaults) --------------------------------- */
+  /* render-scenes.mjs stamps the real --w, --h, --u and safe insets per format and
+     sets data-format on the root, which raises --type in vertical. */
+  --w: 1920px; --h: 1080px; --u: 10.8px;
+  --safe-t: 54px; --safe-b: 54px; --safe-l: 96px; --safe-r: 96px;
+  --type: 1;
+
+  /* video sizes, scaled up 20% in vertical (big - readable in 2s) */
+  --size-mega:     calc(300px * var(--type));   /* hero stat number */
+  --size-display:  calc(140px * var(--type));   /* takeover headline */
+  --size-title:    calc(84px * var(--type));    /* section title */
+  --size-headline: calc(54px * var(--type));    /* card headline */
+  --size-body:     calc(32px * var(--type));    /* supporting copy */
+  --size-label:    calc(24px * var(--type));    /* kicker / metadata */
+  --size-tiny:     calc(19px * var(--type));    /* credits, fine print, timestamps */
 
   --track-tight: -0.02em;   /* display tracking */
   --track-snug:  -0.01em;
@@ -132,3 +139,6 @@
   /* Fine film grain over everything - keeps the dark from banding. */
   --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
+
+/* The phone shows the whole vertical frame smaller, so type runs 20% larger there. */
+:root[data-format="vertical"] { --type: 1.2; }

package/skills/luckiest-video-studio-cards/packs/_blueprint/cards/tier1/t1-stat.html

@@ -13,13 +13,15 @@
     <style>
       html, body { margin: 0; }
       #t1-stat {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--bg);                /* opaque: this is a takeover */
         color: var(--fg);
         font-family: var(--font-body);
         display: flex; flex-direction: column;
         align-items: center; justify-content: center; text-align: center;
         overflow: hidden;
+        /* centered in the safe area, not the frame: vertical's safe area sits high */
+        box-sizing: border-box; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
       }
       #t1-stat .kicker {
         font-family: var(--font-mono); font-size: var(--size-label);
@@ -31,7 +33,7 @@
         font-size: var(--size-display); line-height: 0.95; color: var(--accent);
       }
       #t1-stat .label {
-        font-size: var(--size-headline); font-weight: 500; max-width: 1200px;
+        font-size: var(--size-headline); font-weight: 500; max-width: min(1200px, 100%);
         margin-top: 28px; color: var(--fg);
       }
     </style>

package/skills/luckiest-video-studio-cards/packs/_blueprint/cards/tier2/t2-list.html

@@ -11,12 +11,13 @@
     <style>
       html, body { margin: 0; background: transparent; }
       #t2-list {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent;              /* overlay: do NOT fill the frame */
         color: var(--fg); font-family: var(--font-body);
       }
       #t2-list .card {
-        position: absolute; left: 72px; bottom: 96px; width: 720px;
+        position: absolute; left: var(--safe-l); bottom: calc(var(--safe-b) + 42px); width: 720px;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r)); box-sizing: border-box;
         background: rgba(0, 0, 0, 0.55); border: 1px solid var(--accent);
         border-radius: var(--radius); padding: var(--pad);
         backdrop-filter: blur(8px);
@@ -29,6 +30,8 @@
       #t2-list .headline { font-size: var(--size-headline); font-weight: 700; margin-bottom: 18px; }
       #t2-list ul { margin: 0; padding: 0; list-style: none; }
       #t2-list li { font-size: var(--size-body); margin: 10px 0; opacity: 0.95; }
+      /* Vertical and square: bottom of the safe area, clear of the speaker's face. */
+      [data-format="vertical"] #t2-list .card, [data-format="square"] #t2-list .card { bottom: calc(var(--safe-b) + 24px); }
     </style>
   </head>
   <body>