luckiest-co 1.0.32 → 1.0.34

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-delta.html

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-delta {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -88,7 +88,7 @@
       #t1-stat-delta .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 220px;
+        font-size: calc(220px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
       }
@@ -110,7 +110,7 @@
       /* Trend label row below delta block */
       #t1-stat-delta .trend {
         font-family: var(--font-mono);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.12em;
         text-transform: uppercase;
@@ -137,7 +137,7 @@
       }
 
       #t1-stat-delta .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -152,6 +152,15 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack and its halo center inside the safe area; vertical numeral sized to the width. */
+      [data-format="vertical"] #t1-stat-delta .content, [data-format="square"] #t1-stat-delta .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-delta .kicker, [data-format="square"] #t1-stat-delta .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-delta .halo, [data-format="square"] #t1-stat-delta .halo { top: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2); }
+      [data-format="vertical"] #t1-stat-delta .halo { width: 760px; height: 760px; }
+      [data-format="vertical"] #t1-stat-delta .delta-block { gap: 24px; }
+      [data-format="vertical"] #t1-stat-delta .caret-svg { width: 96px; height: 96px; }
+      [data-format="vertical"] #t1-stat-delta .stat { font-size: calc(170px * var(--type)); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-dial.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-dial {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -78,7 +78,7 @@
       #t1-stat-dial .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 120px;
+        font-size: calc(120px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(160deg, #ffffff 15%, rgba(var(--accent-rgb),0.85) 80%);
@@ -101,7 +101,7 @@
       }
 
       #t1-stat-dial .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -116,6 +116,12 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area, with room above the gauge so its arc
+         clears the kicker. */
+      [data-format="vertical"] #t1-stat-dial .content, [data-format="square"] #t1-stat-dial .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-dial .kicker, [data-format="square"] #t1-stat-dial .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-dial .dial-container, [data-format="square"] #t1-stat-dial .dial-container { margin-top: 90px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-donut.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-st-donut {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -83,7 +83,7 @@
       #t1-st-donut .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 100px;
+        font-size: calc(100px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(160deg, #ffffff 15%, rgba(var(--accent-rgb), 0.85) 80%);
@@ -93,7 +93,7 @@
       }
       #t1-st-donut .stat-sub {
         font-family: var(--font-mono);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.12em;
         text-transform: uppercase;
@@ -119,7 +119,7 @@
 
       /* Source */
       #t1-st-donut .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -134,6 +134,17 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: donut over the label, stacked and centered inside the safe area. */
+      [data-format="vertical"] #t1-st-donut .layout, [data-format="square"] #t1-st-donut .layout {
+        inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding: 0; flex-direction: column; gap: 40px;
+      }
+      [data-format="vertical"] #t1-st-donut .kicker, [data-format="square"] #t1-st-donut .kicker { text-align: center; margin-bottom: 36px; }
+      [data-format="vertical"] #t1-st-donut .right-col, [data-format="square"] #t1-st-donut .right-col { max-width: none; text-align: center; }
+      [data-format="vertical"] #t1-st-donut .label { font-size: calc(44px * var(--type)); }
+      [data-format="square"] #t1-st-donut .layout { gap: 36px; }
+      [data-format="vertical"] #t1-st-donut .donut-wrap, [data-format="vertical"] #t1-st-donut .donut-svg { width: 460px; height: 460px; }
+      [data-format="square"] #t1-st-donut .donut-wrap, [data-format="square"] #t1-st-donut .donut-svg { width: 420px; height: 420px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-dotgrid.html

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-st-dotg {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -81,7 +81,7 @@
       #t1-st-dotg .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 200px;
+        font-size: calc(200px * var(--type));
         line-height: 0.92;
         letter-spacing: var(--track-tight);
         background: linear-gradient(155deg, #ffffff 10%, rgba(var(--accent-rgb), 0.82) 78%);
@@ -91,7 +91,7 @@
       }
       #t1-st-dotg .of-label {
         font-family: var(--font-mono);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.18em;
         text-transform: uppercase;
         color: var(--text-faint);
@@ -112,7 +112,7 @@
       }
 
       #t1-st-dotg .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -127,6 +127,16 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; dots, gap and numeral shrink so the row fits. */
+      [data-format="vertical"] #t1-st-dotg .content, [data-format="square"] #t1-st-dotg .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-st-dotg .kicker, [data-format="square"] #t1-st-dotg .kicker { text-align: center; }
+      [data-format="vertical"] #t1-st-dotg .row { gap: 48px; }
+      [data-format="vertical"] #t1-st-dotg .dot-area, [data-format="vertical"] #t1-st-dotg .dot-row { gap: 12px; }
+      [data-format="vertical"] #t1-st-dotg .dot { width: 24px; height: 24px; }
+      [data-format="vertical"] #t1-st-dotg .stat { font-size: calc(130px * var(--type)); }
+      [data-format="square"] #t1-st-dotg .row { gap: 56px; }
+      [data-format="square"] #t1-st-dotg .stat { font-size: 180px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-figure.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-fig {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -75,7 +75,7 @@
       #t1-stat-fig .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 280px;
+        font-size: calc(280px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         /* white → accent gradient clip-text */
@@ -107,7 +107,7 @@
       /* Source - bottom-left */
       #t1-stat-fig .source {
         position: absolute;
-        left: var(--pad); bottom: 44px;
+        left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono);
         font-size: var(--size-tiny);
         font-weight: var(--wt-reg);
@@ -126,6 +126,12 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack and its halo center inside the safe area; vertical numeral sized to the width. */
+      [data-format="vertical"] #t1-stat-fig .content, [data-format="square"] #t1-stat-fig .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-fig .kicker, [data-format="square"] #t1-stat-fig .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-fig .halo, [data-format="square"] #t1-stat-fig .halo { top: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2); }
+      [data-format="vertical"] #t1-stat-fig .stat { font-size: calc(240px * var(--type)); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-fillshape.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-fill {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -99,7 +99,7 @@
         position: absolute; left: 0; right: 0; bottom: 30px;
         text-align: center;
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 120px; line-height: 1; letter-spacing: var(--track-tight);
+        font-size: calc(120px * var(--type)); line-height: 1; letter-spacing: var(--track-tight);
         color: var(--white); text-shadow: var(--textglow);
         z-index: 3;
       }
@@ -112,7 +112,7 @@
       }
 
       #t1-stat-fill .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -127,6 +127,14 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical: kicker and label over the vessel, stacked in the safe area. Square: the row stays, narrower. */
+      [data-format="vertical"] #t1-stat-fill .content, [data-format="square"] #t1-stat-fill .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-fill .content { flex-direction: column; gap: 64px; }
+      [data-format="vertical"] #t1-stat-fill .text-col { max-width: none; align-items: center; text-align: center; gap: 28px; }
+      [data-format="square"] #t1-stat-fill .content { gap: 48px; }
+      [data-format="square"] #t1-stat-fill .text-col { max-width: 530px; }
+      [data-format="square"] #t1-stat-fill .shape-wrap { width: 320px; height: 440px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-fraction.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-frac {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -55,7 +55,7 @@
       #t1-stat-frac .frac-num {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 240px;
+        font-size: calc(240px * var(--type));
         letter-spacing: var(--track-tight);
         background: linear-gradient(160deg, #ffffff 12%, rgba(var(--accent-rgb),0.85) 82%);
         -webkit-background-clip: text; background-clip: text;
@@ -66,7 +66,7 @@
       #t1-stat-frac .frac-of {
         font-family: var(--font-body);
         font-weight: var(--wt-semi);
-        font-size: 52px;
+        font-size: calc(52px * var(--type));
         color: var(--text-dim);
         letter-spacing: 0.10em;
         text-transform: uppercase;
@@ -75,7 +75,7 @@
       #t1-stat-frac .frac-denom {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 140px;
+        font-size: calc(140px * var(--type));
         letter-spacing: var(--track-tight);
         color: var(--text-faint);
         filter: drop-shadow(0 0 12px rgba(255,255,255,0.18));
@@ -120,7 +120,7 @@
       }
 
       #t1-stat-frac .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -135,6 +135,12 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area. */
+      [data-format="vertical"] #t1-stat-frac .content, [data-format="square"] #t1-stat-frac .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-frac .kicker, [data-format="square"] #t1-stat-frac .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-frac .dots-row { gap: 14px; }
+      [data-format="vertical"] #t1-stat-frac .dot { width: 48px; height: 48px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-funnel.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-funnel {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,7 +34,7 @@
       #t1-stat-funnel .content {
         position: absolute; inset: 0; z-index: 4;
         display: flex; align-items: center;
-        padding: 0 var(--pad);
+        padding: 0 var(--safe-r) 0 var(--safe-l);
         gap: 80px;
       }
 
@@ -57,7 +57,7 @@
       #t1-stat-funnel .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 160px;
+        font-size: calc(160px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(155deg, #ffffff 0%, rgba(var(--accent-rgb), 0.85) 90%);
@@ -68,7 +68,7 @@
 
       #t1-stat-funnel .label {
         font-family: var(--font-body);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         font-weight: var(--wt-med);
         color: var(--text-dim);
         line-height: 1.5;
@@ -121,7 +121,7 @@
 
       #t1-stat-funnel .band-stage {
         font-family: var(--font-body);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         font-weight: var(--wt-semi);
         color: var(--text-dim);
         letter-spacing: 0.04em;
@@ -135,7 +135,7 @@
       #t1-stat-funnel .band-val {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 44px;
+        font-size: calc(44px * var(--type));
         color: var(--text);
         text-shadow: var(--textglow);
       }
@@ -143,7 +143,7 @@
         color: var(--accent);
         text-shadow: var(--textglow-accent),
                      0 0 40px rgba(var(--accent-rgb), 0.55);
-        font-size: 54px;
+        font-size: calc(54px * var(--type));
       }
 
       /* arrow connector between bands */
@@ -159,7 +159,7 @@
       }
 
       #t1-stat-funnel .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -174,6 +174,22 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: kicker, stat and label centered over the funnel, stacked in the safe area;
+         band widths become shares of the safe width. */
+      [data-format="vertical"] #t1-stat-funnel .content, [data-format="square"] #t1-stat-funnel .content {
+        inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding: 0;
+        flex-direction: column; align-items: stretch; justify-content: center; gap: 56px;
+      }
+      [data-format="vertical"] #t1-stat-funnel .left, [data-format="square"] #t1-stat-funnel .left { flex: 0 0 auto; align-items: center; text-align: center; gap: 24px; }
+      [data-format="vertical"] #t1-stat-funnel .label, [data-format="square"] #t1-stat-funnel .label { max-width: none; }
+      [data-format="vertical"] #t1-stat-funnel .right, [data-format="square"] #t1-stat-funnel .right { flex: 0 0 auto; }
+      [data-format="vertical"] #t1-stat-funnel .band, [data-format="square"] #t1-stat-funnel .band { box-sizing: border-box; }
+      [data-format="vertical"] #t1-stat-funnel .band-1, [data-format="square"] #t1-stat-funnel .band-1 { width: 100%; }
+      [data-format="vertical"] #t1-stat-funnel .band-2, [data-format="square"] #t1-stat-funnel .band-2 { width: 88%; }
+      [data-format="vertical"] #t1-stat-funnel .band-3, [data-format="square"] #t1-stat-funnel .band-3 { width: 76%; }
+      [data-format="vertical"] #t1-stat-funnel .band-4, [data-format="square"] #t1-stat-funnel .band-4 { width: 64%; }
+      [data-format="square"] #t1-stat-funnel .content { gap: 40px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-growtharrow.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-garrow {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -32,7 +32,7 @@
 
       /* Layout: text left, arrow SVG right */
       #t1-stat-garrow .text-block {
-        position: absolute; left: 180px; top: 50%; transform: translateY(-52%);
+        position: absolute; left: calc(var(--safe-l) + 84px); top: 50%; transform: translateY(-52%);
         z-index: 4; display: flex; flex-direction: column; gap: 44px;
         max-width: 840px;
       }
@@ -45,6 +45,7 @@
       #t1-stat-garrow .stat {
         font-family: var(--font-display); font-weight: var(--wt-black);
         font-size: var(--size-mega); line-height: 0.88; letter-spacing: var(--track-tight);
+        width: max-content; /* the gradient fill spans the whole word, so the last glyph is not lost past the column */
         background: linear-gradient(145deg, #ffffff 10%, rgba(var(--accent-rgb), 0.88) 80%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent; text-fill-color: transparent;
@@ -61,12 +62,12 @@
 
       /* Arrow SVG - positioned right */
       #t1-stat-garrow .arrow-wrap {
-        position: absolute; right: 120px; top: 50%; transform: translateY(-50%);
+        position: absolute; right: calc(var(--safe-r) + 24px); top: 50%; transform: translateY(-50%);
         width: 680px; height: 640px; z-index: 3;
       }
 
       #t1-stat-garrow .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -81,6 +82,19 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: kicker, stat and label run across the top of the safe area and the arrow
+         sits in the lower right, sized to the space left. */
+      [data-format="vertical"] #t1-stat-garrow .text-block, [data-format="square"] #t1-stat-garrow .text-block {
+        left: var(--safe-l); right: var(--safe-r); top: var(--safe-t); transform: none; max-width: none;
+      }
+      [data-format="vertical"] #t1-stat-garrow .stat { font-size: calc(170px * var(--type)); }
+      [data-format="square"] #t1-stat-garrow .stat { font-size: 200px; }
+      [data-format="vertical"] #t1-stat-garrow .arrow-wrap, [data-format="square"] #t1-stat-garrow .arrow-wrap {
+        right: var(--safe-r); top: auto; bottom: calc(var(--safe-b) + 40px); transform: none; width: 440px; height: 400px;
+      }
+      [data-format="vertical"] #t1-stat-garrow .arrow-wrap svg, [data-format="square"] #t1-stat-garrow .arrow-wrap svg { width: 100%; height: 100%; }
+      [data-format="square"] #t1-stat-garrow .arrow-wrap { width: 400px; height: 380px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-heatcell.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-heat {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -117,7 +117,7 @@
       #t1-stat-heat .stat-suffix {
         font-family: var(--font-display);
         font-weight: var(--wt-semi);
-        font-size: 72px;
+        font-size: calc(72px * var(--type));
         color: var(--text-faint);
         position: relative; z-index: 2;
         letter-spacing: 0.04em;
@@ -138,7 +138,7 @@
       }
 
       #t1-stat-heat .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -153,6 +153,11 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area. */
+      [data-format="vertical"] #t1-stat-heat .content, [data-format="square"] #t1-stat-heat .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-heat .kicker, [data-format="square"] #t1-stat-heat .kicker { text-align: center; }
+      [data-format="square"] #t1-stat-heat .tile { height: 420px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-isotype.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-iso {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,7 +34,7 @@
       #t1-stat-iso .content {
         position: absolute; inset: 0; z-index: 4;
         display: flex; align-items: center;
-        padding: 0 var(--pad);
+        padding: 0 var(--safe-r) 0 var(--safe-l);
         gap: 100px;
       }
 
@@ -73,7 +73,7 @@
       #t1-stat-iso .stat-denom {
         font-family: var(--font-display);
         font-weight: var(--wt-semi);
-        font-size: 80px;
+        font-size: calc(80px * var(--type));
         color: var(--text-faint);
         line-height: 1;
       }
@@ -120,7 +120,7 @@
       }
 
       #t1-stat-iso .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -135,6 +135,18 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: kicker, fraction and label over the icon grid, stacked and centered in the safe area. */
+      [data-format="vertical"] #t1-stat-iso .content, [data-format="square"] #t1-stat-iso .content {
+        inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding: 0;
+        flex-direction: column; justify-content: center; gap: 56px;
+      }
+      [data-format="vertical"] #t1-stat-iso .left, [data-format="square"] #t1-stat-iso .left { flex: 0 0 auto; align-items: center; text-align: center; gap: 28px; }
+      [data-format="vertical"] #t1-stat-iso .label, [data-format="square"] #t1-stat-iso .label { max-width: none; }
+      [data-format="vertical"] #t1-stat-iso .right, [data-format="square"] #t1-stat-iso .right { flex: 0 0 auto; }
+      [data-format="vertical"] #t1-stat-iso .stat-num { font-size: calc(240px * var(--type)); }
+      [data-format="square"] #t1-stat-iso .stat-num { font-size: 240px; }
+      [data-format="square"] #t1-stat-iso .content { gap: 44px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-layered.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-layer {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -60,7 +60,7 @@
       #t1-stat-layer .plane {
         position: absolute;
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 300px; line-height: 1; letter-spacing: -0.03em;
+        font-size: calc(300px * var(--type)); line-height: 1; letter-spacing: -0.03em;
         text-align: center; width: 100%;
       }
 
@@ -94,7 +94,7 @@
       }
 
       #t1-stat-layer .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -109,6 +109,13 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; the number planes take the safe width. */
+      [data-format="vertical"] #t1-stat-layer .content, [data-format="square"] #t1-stat-layer .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-layer .kicker, [data-format="square"] #t1-stat-layer .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-layer .stat-stack, [data-format="square"] #t1-stat-layer .stat-stack { width: 100%; }
+      [data-format="vertical"] #t1-stat-layer .plane { font-size: calc(240px * var(--type)); }
+      [data-format="vertical"] #t1-stat-layer .stat-stack { height: 320px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-mega.html

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-mega {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -68,7 +68,7 @@
       #t1-stat-mega .mega-num {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 320px;
+        font-size: calc(320px * var(--type));
         line-height: 0.88;
         letter-spacing: -0.05em;
         background: linear-gradient(145deg,
@@ -110,7 +110,7 @@
       }
 
       #t1-stat-mega .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -126,6 +126,12 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; vertical numeral sized to the width. */
+      [data-format="vertical"] #t1-stat-mega .stage, [data-format="square"] #t1-stat-mega .stage { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-mega .kicker, [data-format="square"] #t1-stat-mega .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-mega .mega-num { font-size: calc(200px * var(--type)); }
+      [data-format="vertical"] #t1-stat-mega .rule { width: 480px; }
     </style>
   </head>
   <body>