luckiest-co 1.0.32 → 1.0.34

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-sec-mark {
-        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,14 +55,14 @@
       }
       #t1-sec-mark .kicker {
         font-family: var(--font-display); font-style: italic;
-        font-weight: var(--wt-semi); font-size: 36px;
+        font-weight: var(--wt-semi); font-size: calc(36px * var(--type));
         letter-spacing: 0.22em; text-transform: uppercase;
         color: var(--text-dim); text-shadow: var(--textglow);
         margin-bottom: 36px;
       }
       #t1-sec-mark .headline {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 112px; line-height: 1.0; letter-spacing: var(--track-tight);
+        font-size: calc(112px * var(--type)); line-height: 1.0; letter-spacing: var(--track-tight);
         color: var(--white); text-shadow: var(--textglow);
         text-align: center; max-width: 1600px; padding: 0 80px;
         /* clip to reveal letter-by-letter via clip-path (via GSAP chars) */
@@ -99,6 +99,14 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: wordmark centres in the safe area at its width; the sweep follows. */
+      [data-format="vertical"] #t1-sec-mark .content, [data-format="square"] #t1-sec-mark .content {
+        left: var(--safe-l); right: var(--safe-r); top: var(--safe-t); bottom: var(--safe-b);
+      }
+      [data-format="vertical"] #t1-sec-mark .headline, [data-format="square"] #t1-sec-mark .headline { max-width: none; padding: 0; }
+      [data-format="vertical"] #t1-sec-mark .rule-wrap, [data-format="square"] #t1-sec-mark .rule-wrap { max-width: 100%; }
+      [data-format="vertical"] #t1-sec-mark .sweep-bar, [data-format="square"] #t1-sec-mark .sweep-bar { top: calc(calc((var(--safe-t) + var(--h) - var(--safe-b)) / 2) - 50px); }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-annot {
-        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;
       }
@@ -41,7 +41,7 @@
       #t1-stat-annot .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 260px;
+        font-size: calc(260px * var(--type));
         line-height: 1;
         letter-spacing: -0.04em;
         background: linear-gradient(150deg, #ffffff 18%, rgba(var(--accent-rgb), 0.85) 72%);
@@ -54,7 +54,7 @@
       /* SVG leader-line layer - overlays the full canvas */
       #t1-stat-annot .leader-svg {
         position: absolute; inset: 0;
-        width: 1920px; height: 1080px;
+        width: var(--w); height: var(--h);
         z-index: 5; pointer-events: none;
         overflow: visible;
       }
@@ -88,7 +88,7 @@
       }
       #t1-stat-annot .annot-label {
         font-family: var(--font-mono);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.14em;
         text-transform: uppercase;
         color: var(--accent);
@@ -109,15 +109,15 @@
 
       /* Annotation 1 - upper left */
       #t1-stat-annot .annot-1 {
-        left: 148px; top: 196px; text-align: right;
+        left: calc(var(--safe-l) + 52px); top: calc(var(--safe-t) + 142px); text-align: right;
       }
       /* Annotation 2 - lower right */
       #t1-stat-annot .annot-2 {
-        right: 148px; bottom: 220px; text-align: left;
+        right: calc(var(--safe-r) + 52px); bottom: calc(var(--safe-b) + 166px); text-align: left;
       }
 
       #t1-stat-annot .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;
@@ -132,6 +132,21 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 9;
       }
+
+      /* Vertical and square: note 1, number, note 2 stacked down the safe area; the fixed-coordinate
+         leader lines give way to an accent rule on each note. */
+      [data-format="vertical"] #t1-stat-annot .leader-svg, [data-format="square"] #t1-stat-annot .leader-svg { display: none; }
+      [data-format="vertical"] #t1-stat-annot .stat-wrap, [data-format="square"] #t1-stat-annot .stat-wrap {
+        top: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2);
+      }
+      [data-format="vertical"] #t1-stat-annot .stat { font-size: calc(200px * var(--type)); }
+      [data-format="vertical"] #t1-stat-annot .annot-box, [data-format="square"] #t1-stat-annot .annot-box {
+        left: var(--safe-l); right: var(--safe-r); text-align: left;
+        border-left: 3px solid rgba(var(--accent-rgb), 0.65); padding-left: 24px;
+      }
+      [data-format="vertical"] #t1-stat-annot .annot-text, [data-format="square"] #t1-stat-annot .annot-text { max-width: none; }
+      [data-format="vertical"] #t1-stat-annot .annot-1, [data-format="square"] #t1-stat-annot .annot-1 { top: var(--safe-t); }
+      [data-format="vertical"] #t1-stat-annot .annot-2, [data-format="square"] #t1-stat-annot .annot-2 { top: auto; bottom: calc(var(--safe-b) + 70px); }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-baft {
-        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;
       }
@@ -63,7 +63,7 @@
       }
       #t1-stat-baft .side-tag {
         font-family: var(--font-mono);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         letter-spacing: 0.22em;
         text-transform: uppercase;
         padding: 6px 20px;
@@ -84,7 +84,7 @@
       #t1-stat-baft .before-num {
         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);
         color: var(--text-faint);
@@ -95,7 +95,7 @@
       #t1-stat-baft .after-num {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 220px;
+        font-size: calc(220px * var(--type));
         line-height: 1;
         letter-spacing: -0.04em;
         text-align: center;
@@ -116,7 +116,7 @@
       }
       #t1-stat-baft .delta-chip {
         font-family: var(--font-mono);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         font-weight: var(--wt-bold);
         color: #37E68C;
         text-shadow: 0 0 14px rgba(55,230,140,0.70), 0 0 36px rgba(55,230,140,0.35);
@@ -146,7 +146,7 @@
       }
 
       #t1-stat-baft .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;
@@ -161,6 +161,23 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stage centers inside the safe area above the source line. Vertical stacks
+         before, arrow (turned down), after; square keeps the row with smaller numbers. */
+      [data-format="vertical"] #t1-stat-baft .stage, [data-format="square"] #t1-stat-baft .stage {
+        inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 44px) var(--safe-l); gap: 32px;
+      }
+      [data-format="vertical"] #t1-stat-baft .kicker, [data-format="square"] #t1-stat-baft .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-baft .side, [data-format="square"] #t1-stat-baft .side { width: auto; gap: 8px; }
+      [data-format="vertical"] #t1-stat-baft .compare-row { flex-direction: column; gap: 4px; }
+      [data-format="vertical"] #t1-stat-baft .arrow-col { gap: 0; }
+      [data-format="vertical"] #t1-stat-baft .arrow-svg { transform: rotate(90deg); width: 70px; height: 42px; }
+      [data-format="vertical"] #t1-stat-baft .before-num { font-size: calc(100px * var(--type)); }
+      [data-format="vertical"] #t1-stat-baft .after-num { font-size: calc(170px * var(--type)); }
+      [data-format="vertical"] #t1-stat-baft .after-glow { left: calc(50% - 180px); top: 52%; }
+      [data-format="square"] #t1-stat-baft .compare-row { gap: 40px; }
+      [data-format="square"] #t1-stat-baft .before-num { font-size: 130px; }
+      [data-format="square"] #t1-stat-baft .after-num { font-size: 190px; }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-st-pct {
-        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;
       }
@@ -90,7 +90,7 @@
         position: relative; z-index: 2;
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 320px;
+        font-size: calc(320px * var(--type));
         line-height: 1;
         letter-spacing: -0.03em;
         background: linear-gradient(160deg, #ffffff 20%, rgba(var(--accent-rgb), 0.80) 85%);
@@ -116,7 +116,7 @@
 
       /* Source */
       #t1-st-pct .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;
@@ -132,6 +132,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; vertical numeral sized to the narrow width. */
+      [data-format="vertical"] #t1-st-pct .content, [data-format="square"] #t1-st-pct .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
+      [data-format="vertical"] #t1-st-pct .kicker, [data-format="square"] #t1-st-pct .kicker { text-align: center; margin-bottom: 32px; }
+      [data-format="vertical"] #t1-st-pct .stat { font-size: calc(260px * var(--type)); }
+      [data-format="square"] #t1-st-pct .halo-wrap { height: 400px; }
+      [data-format="square"] #t1-st-pct .label { margin-top: 32px; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-brk {
-        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;
       }
@@ -58,7 +58,7 @@
       /* the big number */
       #t1-stat-brk .stat {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 320px; line-height: 1; letter-spacing: -0.04em;
+        font-size: calc(320px * var(--type)); line-height: 1; letter-spacing: -0.04em;
         background: linear-gradient(165deg, #ffffff 10%, rgba(var(--accent-rgb),0.80) 75%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent; text-fill-color: transparent;
@@ -75,7 +75,7 @@
       }
 
       #t1-stat-brk .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;
@@ -90,6 +90,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; smaller numeral and brackets so the row fits. */
+      [data-format="vertical"] #t1-stat-brk .content, [data-format="square"] #t1-stat-brk .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-brk .kicker, [data-format="square"] #t1-stat-brk .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-brk .bracket-row { gap: 16px; }
+      [data-format="vertical"] #t1-stat-brk .brk-svg { width: 60px; height: 300px; }
+      [data-format="vertical"] #t1-stat-brk .stat { font-size: calc(190px * var(--type)); }
+      [data-format="square"] #t1-stat-brk .bracket-row { gap: 24px; }
+      [data-format="square"] #t1-stat-brk .brk-svg { width: 70px; height: 360px; }
+      [data-format="square"] #t1-stat-brk .stat { font-size: 250px; }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-bubble {
-        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 @@
       #t1-stat-bubble .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 130px;
+        font-size: calc(130px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         color: var(--white);
@@ -122,7 +122,7 @@
       }
 
       #t1-stat-bubble .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;
@@ -137,6 +137,10 @@
         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-bubble .stage, [data-format="square"] #t1-stat-bubble .stage { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); gap: 36px; padding-bottom: 40px; }
+      [data-format="vertical"] #t1-stat-bubble .kicker, [data-format="square"] #t1-stat-bubble .kicker { text-align: center; }
     </style>
   </head>
   <body>

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

@@ -17,7 +17,7 @@
       html, body { margin: 0; }
 
       #t1-stat-cbars {
-        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;
       }
@@ -92,7 +92,7 @@
       #t1-stat-cbars .bar-val {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 72px;
+        font-size: calc(72px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
       }
@@ -161,7 +161,7 @@
       }
 
       #t1-stat-cbars .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;
@@ -176,6 +176,11 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the glass card and its stack fill the safe area, above the source line. */
+      [data-format="vertical"] #t1-stat-cbars .glass-card, [data-format="square"] #t1-stat-cbars .glass-card { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 50px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-cbars .stage, [data-format="square"] #t1-stat-cbars .stage { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 50px) var(--safe-l); padding: 0 56px; }
+      [data-format="vertical"] #t1-stat-cbars .kicker, [data-format="square"] #t1-stat-cbars .kicker { text-align: center; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-clock {
-        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;
       }
@@ -66,14 +66,14 @@
       }
       #t1-stat-clock .stat {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 110px; line-height: 0.95; letter-spacing: var(--track-tight);
+        font-size: calc(110px * var(--type)); line-height: 0.95; letter-spacing: var(--track-tight);
         background: linear-gradient(155deg, #ffffff 15%, rgba(var(--accent-rgb), 0.85) 80%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent; text-fill-color: transparent;
         filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.55));
       }
       #t1-stat-clock .stat-unit {
-        font-family: var(--font-mono); font-size: 26px;
+        font-family: var(--font-mono); font-size: calc(26px * var(--type));
         color: var(--accent); letter-spacing: 0.12em;
         text-shadow: var(--textglow-accent);
       }
@@ -89,7 +89,7 @@
       }
 
       #t1-stat-clock .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;
@@ -104,6 +104,10 @@
         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-clock .content, [data-format="square"] #t1-stat-clock .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); gap: 36px; padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-clock .kicker, [data-format="square"] #t1-stat-clock .kicker { text-align: center; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-st-col {
-        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;
       }
@@ -138,7 +138,7 @@
         bottom: calc(100% + 14px);
         width: 100%; text-align: center;
         font-family: var(--font-mono);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.06em;
         color: var(--text-dim);
@@ -170,7 +170,7 @@
         flex: 1;
         text-align: center;
         font-family: var(--font-mono);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.08em;
         text-transform: uppercase;
@@ -199,7 +199,7 @@
 
       /* Source */
       #t1-st-col .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;
@@ -214,6 +214,14 @@
         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 chart takes the safe width. */
+      [data-format="vertical"] #t1-st-col .content, [data-format="square"] #t1-st-col .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); padding-bottom: 40px; }
+      [data-format="vertical"] #t1-st-col .kicker, [data-format="square"] #t1-st-col .kicker { text-align: center; }
+      [data-format="vertical"] #t1-st-col .chart-wrap, [data-format="square"] #t1-st-col .chart-wrap,
+      [data-format="vertical"] #t1-st-col .axis-labels, [data-format="square"] #t1-st-col .axis-labels { width: 100%; }
+      [data-format="vertical"] #t1-st-col .columns, [data-format="vertical"] #t1-st-col .axis-labels { gap: 24px; }
+      [data-format="square"] #t1-st-col .columns, [data-format="square"] #t1-st-col .axis-labels { gap: 32px; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-compass {
-        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;
       }
@@ -74,7 +74,7 @@
       }
       #t1-stat-compass .stat {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 116px; line-height: 1; letter-spacing: var(--track-tight);
+        font-size: calc(116px * var(--type)); line-height: 1; letter-spacing: var(--track-tight);
         background: linear-gradient(150deg, #ffffff 10%, rgba(var(--accent-rgb),0.82) 72%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent; text-fill-color: transparent;
@@ -91,7 +91,7 @@
       }
 
       #t1-stat-compass .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;
@@ -106,6 +106,10 @@
         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-compass .content, [data-format="square"] #t1-stat-compass .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); gap: 36px; padding-bottom: 40px; }
+      [data-format="vertical"] #t1-stat-compass .kicker, [data-format="square"] #t1-stat-compass .kicker { text-align: center; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-cpill {
-        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;
       }
@@ -84,7 +84,7 @@
       #t1-stat-cpill .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 200px;
+        font-size: calc(200px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(160deg, #ffffff 15%, rgba(var(--accent-rgb),0.85) 82%);
@@ -108,7 +108,7 @@
       }
 
       #t1-stat-cpill .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;
@@ -123,6 +123,14 @@
         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 pill and its number shrink to the width. */
+      [data-format="vertical"] #t1-stat-cpill .content, [data-format="square"] #t1-stat-cpill .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-cpill .kicker, [data-format="square"] #t1-stat-cpill .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-cpill .pill { padding: 40px 48px; }
+      [data-format="vertical"] #t1-stat-cpill .stat { font-size: calc(130px * var(--type)); }
+      [data-format="square"] #t1-stat-cpill .pill { padding: 40px 64px; }
+      [data-format="square"] #t1-stat-cpill .stat { font-size: 170px; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-curve {
-        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;
       }
@@ -38,7 +38,7 @@
 
       /* Kicker + top label - upper left */
       #t1-stat-curve .top-text {
-        position: absolute; left: 140px; top: 140px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 44px); top: calc(var(--safe-t) + 86px); z-index: 4;
         display: flex; flex-direction: column; gap: 20px;
         max-width: 700px;
       }
@@ -65,14 +65,14 @@
 
       /* Big stat - upper right, anchored near curve apex */
       #t1-stat-curve .apex-block {
-        position: absolute; right: 140px; top: 120px;
+        position: absolute; right: calc(var(--safe-r) + 44px); top: calc(var(--safe-t) + 66px);
         z-index: 5; text-align: right;
         display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
       }
       #t1-stat-curve .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 220px;
+        font-size: calc(220px * var(--type));
         line-height: 0.88;
         letter-spacing: var(--track-tight);
         background: linear-gradient(155deg, #ffffff 10%, rgba(var(--accent-rgb), 0.80) 88%);
@@ -82,7 +82,7 @@
       }
       #t1-stat-curve .stat-unit {
         font-family: var(--font-mono);
-        font-size: 30px;
+        font-size: calc(30px * var(--type));
         letter-spacing: 0.14em;
         text-transform: uppercase;
         color: var(--accent);
@@ -92,7 +92,7 @@
       /* SVG curve - full canvas */
       #t1-stat-curve .curve-svg {
         position: absolute; inset: 0;
-        width: 1920px; height: 1080px;
+        width: var(--w); height: var(--h);
         z-index: 3; overflow: visible;
       }
 
@@ -108,7 +108,7 @@
       }
 
       #t1-stat-curve .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;
@@ -123,6 +123,17 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: kicker and label on top, the number under them on the right, and the chart
+         drawn as a 16:9 box in the lower safe area (the tip glow follows it through the SVG transform). */
+      [data-format="vertical"] #t1-stat-curve .top-text, [data-format="square"] #t1-stat-curve .top-text { left: var(--safe-l); right: var(--safe-r); top: var(--safe-t); max-width: none; }
+      [data-format="vertical"] #t1-stat-curve .label, [data-format="square"] #t1-stat-curve .label { max-width: none; }
+      [data-format="vertical"] #t1-stat-curve .apex-block { right: var(--safe-r); top: calc(var(--safe-t) + 260px); }
+      [data-format="vertical"] #t1-stat-curve .stat { font-size: calc(180px * var(--type)); }
+      [data-format="vertical"] #t1-stat-curve .curve-svg { inset: auto; left: var(--safe-l); top: calc(var(--safe-t) + 520px); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); height: calc((var(--w) - var(--safe-l) - var(--safe-r)) * 0.5625); }
+      [data-format="square"] #t1-stat-curve .apex-block { right: var(--safe-r); top: calc(var(--safe-t) + 150px); }
+      [data-format="square"] #t1-stat-curve .stat { font-size: 180px; }
+      [data-format="square"] #t1-stat-curve .curve-svg { inset: auto; left: var(--safe-l); top: calc(var(--safe-t) + 406px); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); height: calc((var(--w) - var(--safe-l) - var(--safe-r)) * 0.5625); }
     </style>
   </head>
   <body>
@@ -275,9 +286,10 @@
               const pt = lineEl.getPointAtLength(t * totalLen);
               tipDotEl.setAttribute("cx", pt.x);
               tipDotEl.setAttribute("cy", pt.y);
-              /* tipglow in canvas px (SVG viewBox = 1920x1080 = canvas) */
-              tipGlowEl.style.left = pt.x + "px";
-              tipGlowEl.style.top  = pt.y + "px";
+              /* tipglow in canvas px: map the SVG point through the SVG's on-screen transform */
+              const cp = new DOMPoint(pt.x, pt.y).matrixTransform(lineEl.getScreenCTM());
+              tipGlowEl.style.left = cp.x + "px";
+              tipGlowEl.style.top  = cp.y + "px";
             }
           }
         }, 0.85)