luckiest-co 1.0.32 → 1.0.34

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-ticker.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-ticker {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -27,34 +27,51 @@
         background-size: 180px 180px; mix-blend-mode: multiply; opacity: 0.4; pointer-events: none; z-index: 5;
       }
       #t1-sec-ticker .kicker {
-        position: absolute; left: 150px; top: 250px;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 196px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
       #t1-sec-ticker .headline {
-        position: absolute; left: 150px; top: 320px; width: 1500px;
-        font-weight: var(--wt-black); font-size: 142px; line-height: 0.95;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 266px); width: 1500px;
+        font-weight: var(--wt-black); font-size: calc(142px * var(--type)); line-height: 0.95;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-ticker .headline em { font-style: normal; background: var(--yellow); padding: 0 14px; }
       /* lower band */
       #t1-sec-ticker .band {
-        position: absolute; left: 0; right: 0; bottom: 90px; height: 110px;
+        position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 36px); height: 110px;
         background: var(--yellow); display: flex; align-items: center; overflow: hidden; z-index: 3;
+        padding: 0 var(--safe-r) 0 var(--safe-l); box-sizing: border-box;
       }
       #t1-sec-ticker .band .redrule { position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: var(--red); }
       #t1-sec-ticker .tag {
         flex: none; height: 110px; display: flex; align-items: center; padding: 0 34px;
         background: var(--red); color: var(--paper);
-        font-family: var(--font-label); font-weight: var(--wt-black); font-size: 40px;
+        font-family: var(--font-label); font-weight: var(--wt-black); font-size: calc(40px * var(--type));
         letter-spacing: 0.08em; text-transform: uppercase; z-index: 2;
       }
+      /* the crawl runs in a window inside the safe insets: one wrapped line wider than the window
+         (by the crawl distance) so the text never runs past the frame edge */
+      #t1-sec-ticker .tickwin { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }
       #t1-sec-ticker .ticker {
-        white-space: nowrap; padding-left: 40px;
-        font-family: var(--font-label); font-weight: var(--wt-bold); font-size: 44px;
+        flex: none; width: calc(100% + 380px); height: 1.25em; line-height: 1.25em; overflow: hidden; padding-left: 40px;
+        font-family: var(--font-label); font-weight: var(--wt-bold); font-size: calc(44px * var(--type));
         letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
       }
+
+      /* Vertical and square: kicker and headline from the top of the safe area, the band at the
+         safe bottom. */
+      [data-format="vertical"] #t1-sec-ticker .kicker, [data-format="square"] #t1-sec-ticker .kicker { left: var(--safe-l); top: calc(var(--safe-t) + 40px); }
+      [data-format="vertical"] #t1-sec-ticker .headline, [data-format="square"] #t1-sec-ticker .headline {
+        left: var(--safe-l); top: calc(var(--safe-t) + 110px); width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t1-sec-ticker .kicker { top: calc(var(--safe-t) + 200px); }
+      [data-format="vertical"] #t1-sec-ticker .headline { top: calc(var(--safe-t) + 270px); font-size: calc(112px * var(--type)); }
+      [data-format="square"] #t1-sec-ticker .headline { font-size: 120px; }
+      [data-format="vertical"] #t1-sec-ticker .band, [data-format="square"] #t1-sec-ticker .band { bottom: var(--safe-b); }
+      [data-format="vertical"] #t1-sec-ticker .band, [data-format="vertical"] #t1-sec-ticker .tag { height: 124px; }
+      [data-format="square"] #t1-sec-ticker .ticker { padding-left: 60px; }
     </style>
   </head>
   <body>
@@ -65,7 +82,7 @@
       <div class="band">
         <div class="redrule"></div>
         <div class="tag" data-slot="tag">BREAKING</div>
-        <div class="ticker" data-slot="ticker">What the data really shows  ·  Who knew, and when  ·  The fallout begins  ·  Full story inside</div>
+        <div class="tickwin"><div class="ticker" data-slot="ticker">What the data really shows  ·  Who knew, and when  ·  The fallout begins  ·  Full story inside</div></div>
       </div>
       <div class="grain"></div>
     </div>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-tornstrip.html

@@ -11,7 +11,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-torn {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,7 +34,7 @@
       }
       /* the torn strip */
       #t1-sec-torn .strip {
-        position: absolute; left: -40px; right: -40px; top: 380px; padding: 60px 120px;
+        position: absolute; left: -40px; right: -40px; top: calc(var(--safe-t) + 326px); padding: 60px calc(var(--safe-r) + 64px) 60px calc(var(--safe-l) + 64px);
         background: var(--paper-2); z-index: 3; transform: rotate(-3.4deg);
         box-shadow: 0 26px 50px rgba(23,19,14,0.32);
         clip-path: polygon(0 14%, 6% 6%, 14% 12%, 23% 4%, 33% 13%, 44% 5%, 55% 14%, 66% 6%, 77% 13%, 87% 5%, 95% 12%, 100% 6%,
@@ -46,16 +46,25 @@
         text-transform: uppercase; color: var(--red); margin-bottom: 14px;
       }
       #t1-sec-torn .headline {
-        font-weight: var(--wt-black); font-size: 132px; line-height: 0.95;
+        font-weight: var(--wt-black); font-size: calc(132px * var(--type)); line-height: 0.95;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-torn .headline em { font-style: normal; background: var(--yellow); padding: 0 14px; }
       #t1-sec-torn .source {
-        position: absolute; left: 150px; bottom: 80px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 26px); z-index: 4;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: the strip stays full bleed but sits in the safe box and its text wraps
+         inside the safe insets; newsprint goes to two columns in vertical. */
+      [data-format="vertical"] #t1-sec-torn .news { column-count: 2; }
+      [data-format="vertical"] #t1-sec-torn .strip { top: calc(var(--safe-t) + 200px); padding: 70px calc(var(--safe-r) + 80px) 70px calc(var(--safe-l) + 80px); }
+      [data-format="square"] #t1-sec-torn .strip { top: calc(var(--safe-t) + 230px); padding: 60px calc(var(--safe-r) + 80px) 60px calc(var(--safe-l) + 80px); }
+      [data-format="vertical"] #t1-sec-torn .headline { font-size: calc(104px * var(--type)); }
+      [data-format="square"] #t1-sec-torn .headline { font-size: 112px; }
+      [data-format="vertical"] #t1-sec-torn .source, [data-format="square"] #t1-sec-torn .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-stat-annotated.html

@@ -13,7 +13,7 @@
     <style>
       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(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,7 +34,7 @@
 
       /* kicker */
       #t1-stat-annot .kicker {
-        position: absolute; left: 130px; top: 220px;
+        position: absolute; left: calc(var(--safe-l) + 34px); top: calc(var(--safe-t) + 166px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--red);
@@ -42,8 +42,8 @@
 
       /* big stat - dead center */
       #t1-stat-annot .stat {
-        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
-        font-weight: var(--wt-black); font-size: 480px; line-height: 1;
+        position: absolute; left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2); top: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2); transform: translate(-50%, -50%);
+        font-weight: var(--wt-black); font-size: calc(480px * var(--type)); line-height: 1;
         letter-spacing: -0.06em; color: var(--ink);
         font-variant-numeric: tabular-nums;
         z-index: 2;
@@ -55,7 +55,7 @@
       .annot {
         position: absolute; z-index: 3;
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 28px; letter-spacing: var(--track-wide); text-transform: uppercase;
+        font-size: calc(28px * var(--type)); letter-spacing: var(--track-wide); text-transform: uppercase;
         color: var(--ink); display: flex; align-items: center; gap: 0;
       }
       /* line element inside each annot */
@@ -75,7 +75,7 @@
 
       /* note 1 - upper left: horizontal line extends right toward stat */
       #t1-stat-annot .annot-1 {
-        left: 130px; top: 264px;
+        left: calc(var(--safe-l) + 34px); top: calc(var(--safe-t) + 210px);
         flex-direction: row;
       }
       #t1-stat-annot .annot-1 .line { width: 320px; }
@@ -83,14 +83,14 @@
 
       /* note 2 - lower left: goes up+right via two segments (pure CSS, two divs) */
       #t1-stat-annot .annot-2 {
-        left: 130px; bottom: 270px;
+        left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 216px);
         flex-direction: row;
       }
       #t1-stat-annot .annot-2 .line { width: 280px; }
 
       /* note 3 - right side: horizontal line extends left toward stat */
       #t1-stat-annot .annot-3 {
-        right: 130px; top: 50%; transform: translateY(-50%);
+        right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2); transform: translateY(-50%);
         flex-direction: row-reverse; /* line goes left */
       }
       #t1-stat-annot .annot-3 .line {
@@ -99,13 +99,33 @@
 
       /* source */
       #t1-stat-annot .source {
-        position: absolute; left: 130px; bottom: 96px;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 42px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
         z-index: 4;
       }
+
+      /* Vertical and square: number centered in the safe box with note 1 above it and notes 2
+         and 3 on their own rows below it (note 3 right-aligned, its line still reaching left). */
+      [data-format="vertical"] #t1-stat-annot .kicker, [data-format="square"] #t1-stat-annot .kicker { left: var(--safe-l); top: var(--safe-t); }
+      [data-format="vertical"] #t1-stat-annot .stat { font-size: calc(300px * var(--type)); }
+      [data-format="square"] #t1-stat-annot .stat { font-size: 400px; }
+      [data-format="vertical"] #t1-stat-annot .annot-1, [data-format="square"] #t1-stat-annot .annot-1 { left: var(--safe-l); }
+      [data-format="vertical"] #t1-stat-annot .annot-1 { top: calc(var(--safe-t) + 112px); }
+      [data-format="square"] #t1-stat-annot .annot-1 { top: calc(var(--safe-t) + 90px); }
+      [data-format="vertical"] #t1-stat-annot .annot-1 .line, [data-format="square"] #t1-stat-annot .annot-1 .line { width: 200px; }
+      [data-format="vertical"] #t1-stat-annot .annot-2, [data-format="square"] #t1-stat-annot .annot-2 { left: var(--safe-l); bottom: auto; }
+      [data-format="vertical"] #t1-stat-annot .annot-2 { top: calc(var(--safe-t) + 700px); }
+      [data-format="square"] #t1-stat-annot .annot-2 { top: calc(var(--safe-t) + 690px); }
+      [data-format="vertical"] #t1-stat-annot .annot-2 .line, [data-format="square"] #t1-stat-annot .annot-2 .line { width: 200px; }
+      [data-format="vertical"] #t1-stat-annot .annot-3, [data-format="square"] #t1-stat-annot .annot-3 { right: var(--safe-r); transform: none; }
+      [data-format="vertical"] #t1-stat-annot .annot-3 { top: calc(var(--safe-t) + 780px); }
+      [data-format="square"] #t1-stat-annot .annot-3 { top: calc(var(--safe-t) + 760px); }
+      [data-format="vertical"] #t1-stat-annot .annot-3 .line, [data-format="square"] #t1-stat-annot .annot-3 .line { width: 200px; }
+      [data-format="vertical"] #t1-stat-annot .source, [data-format="square"] #t1-stat-annot .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
+
   </head>
   <body>
     <div id="t1-stat-annot" data-composition-id="t1-stat-annot" data-start="0" data-width="1920" data-height="1080">

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-stat-arc.html

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-stat-arc {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -33,33 +33,51 @@
         background: radial-gradient(120% 120% at 36% 50%, transparent 54%, rgba(23,19,14,0.18) 100%);
       }
       #t1-stat-arc .kicker {
-        position: absolute; left: 200px; top: 220px;
+        position: absolute; left: calc(var(--safe-l) + 104px); top: calc(var(--safe-t) + 166px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--red);
       }
       #t1-stat-arc .gaugewrap {
-        position: absolute; left: 200px; top: 50%; transform: translateY(-50%);
+        position: absolute; left: calc(var(--safe-l) + 104px); top: 50%; transform: translateY(-50%);
         width: 560px; height: 560px;
       }
       #t1-stat-arc svg { width: 560px; height: 560px; transform: rotate(-90deg); }
       #t1-stat-arc .stat {
         position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-size: 200px; line-height: 1; color: var(--ink);
+        font-weight: var(--wt-black); font-size: calc(200px * var(--type)); line-height: 1; color: var(--ink);
         font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
       }
       #t1-stat-arc .label {
-        position: absolute; right: 150px; top: 50%; transform: translateY(-50%);
-        width: 640px; font-weight: var(--wt-thin); font-size: 64px; line-height: 1.08;
+        position: absolute; right: calc(var(--safe-r) + 54px); top: 50%; transform: translateY(-50%);
+        width: 640px; font-weight: var(--wt-thin); font-size: calc(64px * var(--type)); line-height: 1.08;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-stat-arc .label em { font-style: italic; font-weight: var(--wt-black); }
       #t1-stat-arc .source {
-        position: absolute; left: 200px; bottom: 96px;
+        position: absolute; left: calc(var(--safe-l) + 104px); bottom: calc(var(--safe-b) + 42px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: kicker, the gauge centered on the safe area, label centered under it,
+         source at the safe bottom. The gauge keeps its translateY(-50%), so top is its center. */
+      [data-format="vertical"] #t1-stat-arc, [data-format="square"] #t1-stat-arc {
+        --cx: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+        --cy: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2);
+      }
+      [data-format="vertical"] #t1-stat-arc .kicker, [data-format="square"] #t1-stat-arc .kicker { left: var(--safe-l); top: var(--safe-t); }
+      [data-format="vertical"] #t1-stat-arc .gaugewrap { left: calc(var(--cx) - 280px); top: calc(var(--safe-t) + 360px); }
+      [data-format="vertical"] #t1-stat-arc .stat { font-size: calc(170px * var(--type)); }
+      [data-format="square"] #t1-stat-arc .gaugewrap { left: calc(var(--cx) - 240px); top: calc(var(--safe-t) + 300px); width: 480px; height: 480px; }
+      [data-format="square"] #t1-stat-arc svg { width: 480px; height: 480px; }
+      [data-format="square"] #t1-stat-arc .stat { font-size: 170px; }
+      [data-format="vertical"] #t1-stat-arc .label, [data-format="square"] #t1-stat-arc .label {
+        left: var(--safe-l); right: var(--safe-r); width: auto; top: calc(var(--safe-t) + 680px); transform: none; text-align: center;
+      }
+      [data-format="square"] #t1-stat-arc .label { top: calc(var(--safe-t) + 590px); }
+      [data-format="vertical"] #t1-stat-arc .source, [data-format="square"] #t1-stat-arc .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-stat-axis.html

@@ -15,7 +15,7 @@
     <style>
       html, body { margin: 0; }
       #t1-stat-axis {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,14 +34,14 @@
         background: radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(23,19,14,0.16) 100%);
       }
       #t1-stat-axis .kicker {
-        position: absolute; left: 130px; top: 180px;
+        position: absolute; left: calc(var(--safe-l) + 34px); top: calc(var(--safe-t) + 126px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--red);
       }
       /* ---- axis track container ---- */
       #t1-stat-axis .axis-track {
-        position: absolute; left: 130px; right: 130px; top: 540px; height: 10px;
+        position: absolute; left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + 486px); height: 10px;
         background: var(--ink); transform-origin: left center;
       }
       /* end-cap ticks */
@@ -55,16 +55,16 @@
       /* ---- end-point labels ---- */
       #t1-stat-axis .axis-start-label,
       #t1-stat-axis .axis-end-label {
-        position: absolute; top: 600px;
+        position: absolute; top: calc(var(--safe-t) + 546px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
-      #t1-stat-axis .axis-start-label { left: 130px; }
-      #t1-stat-axis .axis-end-label   { right: 130px; text-align: right; }
+      #t1-stat-axis .axis-start-label { left: calc(var(--safe-l) + 34px); }
+      #t1-stat-axis .axis-end-label   { right: calc(var(--safe-r) + 34px); text-align: right; }
       /* ---- point + callout group - positioned by JS ---- */
       #t1-stat-axis .point-group {
-        position: absolute; top: 440px;
+        position: absolute; top: calc(var(--safe-t) + 386px);
         transform: translateX(-50%);
         display: flex; flex-direction: column; align-items: center;
         z-index: 3;
@@ -75,7 +75,7 @@
         box-shadow: inset 0 0 0 5px var(--ink);
       }
       #t1-stat-axis .callout-box .stat {
-        font-weight: var(--wt-black); font-size: 120px;
+        font-weight: var(--wt-black); font-size: calc(120px * var(--type));
         font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
         display: block;
       }
@@ -100,18 +100,38 @@
       }
       /* ---- label + source ---- */
       #t1-stat-axis .label {
-        position: absolute; left: 130px; right: 130px; top: 700px;
-        font-weight: var(--wt-thin); font-size: 56px; line-height: 1.05;
+        position: absolute; left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + 646px);
+        font-weight: var(--wt-thin); font-size: calc(56px * var(--type)); line-height: 1.05;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-stat-axis .label em { font-style: italic; font-weight: var(--wt-black); }
       #t1-stat-axis .source {
-        position: absolute; left: 130px; bottom: 96px;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 42px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: the axis spans the safe width; kicker, callout, axis, end labels,
+         label and source stack down the safe area. */
+      [data-format="vertical"] #t1-stat-axis .kicker, [data-format="square"] #t1-stat-axis .kicker { left: var(--safe-l); top: var(--safe-t); }
+      [data-format="vertical"] #t1-stat-axis .axis-track, [data-format="vertical"] #t1-stat-axis .label,
+      [data-format="square"] #t1-stat-axis .axis-track, [data-format="square"] #t1-stat-axis .label { left: var(--safe-l); right: var(--safe-r); }
+      [data-format="vertical"] #t1-stat-axis .axis-start-label, [data-format="square"] #t1-stat-axis .axis-start-label { left: var(--safe-l); }
+      [data-format="vertical"] #t1-stat-axis .axis-end-label, [data-format="square"] #t1-stat-axis .axis-end-label { right: var(--safe-r); }
+      [data-format="vertical"] #t1-stat-axis .point-group { top: calc(var(--safe-t) + 330px); }
+      [data-format="vertical"] #t1-stat-axis .callout-box .stat { font-size: calc(100px * var(--type)); }
+
+      [data-format="vertical"] #t1-stat-axis .axis-track { top: calc(var(--safe-t) + 430px); }
+      [data-format="vertical"] #t1-stat-axis .axis-start-label, [data-format="vertical"] #t1-stat-axis .axis-end-label { top: calc(var(--safe-t) + 490px); }
+      [data-format="vertical"] #t1-stat-axis .label { top: calc(var(--safe-t) + 610px); }
+      [data-format="square"] #t1-stat-axis .point-group { top: calc(var(--safe-t) + 280px); }
+      [data-format="square"] #t1-stat-axis .axis-track { top: calc(var(--safe-t) + 380px); }
+      [data-format="square"] #t1-stat-axis .axis-start-label, [data-format="square"] #t1-stat-axis .axis-end-label { top: calc(var(--safe-t) + 440px); }
+      [data-format="square"] #t1-stat-axis .label { top: calc(var(--safe-t) + 540px); font-size: 56px; }
+      [data-format="vertical"] #t1-stat-axis .source, [data-format="square"] #t1-stat-axis .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
+
   </head>
   <body>
     <div id="t1-stat-axis" data-composition-id="t1-stat-axis" data-start="0" data-width="1920" data-height="1080">
@@ -141,9 +161,9 @@
       // Position the point group on the axis
       const axisTrack = document.getElementById("axis-track");
       const pos = Math.max(0, Math.min(1, parseFloat(axisTrack.getAttribute("data-pos")) || 0.62));
-      // axis spans from left:130px to right:130px → usable width = 1920 - 260 = 1660px
-      const AXIS_LEFT = 130;
-      const AXIS_WIDTH = 1920 - 260;
+      // measured from the laid-out track so it follows the format's safe insets
+      const AXIS_LEFT = axisTrack.offsetLeft;
+      const AXIS_WIDTH = axisTrack.offsetWidth;
       const pointGroup = document.getElementById("point-group");
       pointGroup.style.left = (AXIS_LEFT + pos * AXIS_WIDTH) + "px";
 

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-stat-bar.html

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-stat-bar {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -33,13 +33,13 @@
         background: radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(23,19,14,0.16) 100%);
       }
       #t1-stat-bar .kicker {
-        position: absolute; left: 130px; top: 280px;
+        position: absolute; left: calc(var(--safe-l) + 34px); top: calc(var(--safe-t) + 226px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--red);
       }
       #t1-stat-bar .track {
-        position: absolute; left: 130px; right: 130px; top: 470px; height: 150px;
+        position: absolute; left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + 416px); height: 150px;
         background: var(--paper-2); box-shadow: inset 0 0 0 4px var(--ink);
       }
       #t1-stat-bar .fill {
@@ -49,27 +49,36 @@
       }
       #t1-stat-bar .stat {
         position: absolute; top: 50%; transform: translateY(-50%);
-        right: 30px; z-index: 3; font-weight: var(--wt-black); font-size: 120px;
+        right: 30px; z-index: 3; font-weight: var(--wt-black); font-size: calc(120px * var(--type));
         line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
       }
       /* faint axis ticks on the track */
       #t1-stat-bar .ticks {
-        position: absolute; left: 130px; right: 130px; top: 632px; height: 26px;
+        position: absolute; left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + 578px); height: 26px;
         background-image: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 25%);
         opacity: 0.35;
       }
       #t1-stat-bar .label {
-        position: absolute; left: 130px; right: 130px; top: 720px;
-        font-weight: var(--wt-thin); font-size: 60px; line-height: 1.05;
+        position: absolute; left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + 666px);
+        font-weight: var(--wt-thin); font-size: calc(60px * var(--type)); line-height: 1.05;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-stat-bar .label em { font-style: italic; font-weight: var(--wt-black); }
       #t1-stat-bar .source {
-        position: absolute; left: 130px; bottom: 96px;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 42px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: the same stack (kicker, bar, ticks, label) spans the safe width and
+         sits centered in the safe height; source stays at the safe bottom. */
+      [data-format="vertical"] #t1-stat-bar .kicker, [data-format="square"] #t1-stat-bar .kicker { left: var(--safe-l); top: calc(var(--safe-t) + 150px); }
+      [data-format="vertical"] #t1-stat-bar .track, [data-format="square"] #t1-stat-bar .track { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 220px); height: 170px; }
+      [data-format="vertical"] #t1-stat-bar .ticks, [data-format="square"] #t1-stat-bar .ticks { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 402px); }
+      [data-format="vertical"] #t1-stat-bar .label, [data-format="square"] #t1-stat-bar .label { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 480px); }
+      [data-format="vertical"] #t1-stat-bar .stat { font-size: calc(110px * var(--type)); right: 22px; }
+      [data-format="vertical"] #t1-stat-bar .source, [data-format="square"] #t1-stat-bar .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-stat-bracket.html

@@ -15,7 +15,7 @@
     <style>
       html, body { margin: 0; }
       #t1-stat-bracket {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,18 +34,18 @@
         background: radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(23,19,14,0.16) 100%);
       }
       #t1-stat-bracket .kicker {
-        position: absolute; left: 50%; top: 148px; transform: translateX(-50%);
+        position: absolute; left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2); top: calc(var(--safe-t) + 94px); transform: translateX(-50%);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--red); white-space: nowrap;
       }
       /* bracket lockup - centered on canvas */
       #t1-stat-bracket .lockup {
-        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
+        position: absolute; left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2); top: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2); transform: translate(-50%, -54%);
         display: flex; align-items: center; gap: 0;
       }
       #t1-stat-bracket .bracket {
-        font-weight: var(--wt-black); font-size: 440px; line-height: 0.88;
+        font-weight: var(--wt-black); font-size: calc(440px * var(--type)); line-height: 0.88;
         color: var(--ink); font-family: var(--font-display);
         /* slightly condensed bracket characters feel more editorial */
         letter-spacing: -0.06em;
@@ -57,7 +57,7 @@
         text-align: center; position: relative;
       }
       #t1-stat-bracket .stat {
-        display: block; font-weight: var(--wt-black); font-size: 340px;
+        display: block; font-weight: var(--wt-black); font-size: calc(340px * var(--type));
         line-height: 0.9; letter-spacing: -0.04em; color: var(--ink);
         font-variant-numeric: tabular-nums;
         clip-path: inset(0 0 0 0);
@@ -68,20 +68,36 @@
       }
       /* label below */
       #t1-stat-bracket .label {
-        position: absolute; left: 50%; bottom: 192px; transform: translateX(-50%);
+        position: absolute; left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2); bottom: calc(var(--safe-b) + 138px); transform: translateX(-50%);
         width: 1300px; text-align: center;
-        font-weight: var(--wt-thin); font-size: 58px; line-height: 1.1;
+        font-weight: var(--wt-thin); font-size: calc(58px * var(--type)); line-height: 1.1;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-stat-bracket .label em { font-style: italic; font-weight: var(--wt-black); }
       #t1-stat-bracket .source {
-        position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
+        position: absolute; left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2); bottom: calc(var(--safe-b) + 42px); transform: translateX(-50%);
         white-space: nowrap;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: smaller bracket lockup in the upper safe area, label wraps at
+         safe width under it, source on the safe bottom. */
+      [data-format="vertical"] #t1-stat-bracket .kicker, [data-format="square"] #t1-stat-bracket .kicker { top: var(--safe-t); }
+      [data-format="vertical"] #t1-stat-bracket .lockup { top: calc(var(--safe-t) + 330px); }
+      [data-format="vertical"] #t1-stat-bracket .bracket { font-size: calc(300px * var(--type)); }
+      [data-format="vertical"] #t1-stat-bracket .stat { font-size: calc(230px * var(--type)); }
+      [data-format="square"] #t1-stat-bracket .lockup { top: calc(var(--safe-t) + 330px); }
+      [data-format="square"] #t1-stat-bracket .bracket { font-size: 380px; }
+      [data-format="square"] #t1-stat-bracket .stat { font-size: 290px; }
+      [data-format="vertical"] #t1-stat-bracket .label, [data-format="square"] #t1-stat-bracket .label {
+        width: calc(var(--w) - var(--safe-l) - var(--safe-r)); bottom: calc(var(--safe-b) + 70px); text-wrap: balance;
+
+      }
+      [data-format="vertical"] #t1-stat-bracket .source, [data-format="square"] #t1-stat-bracket .source { bottom: var(--safe-b); }
     </style>
+
   </head>
   <body>
     <div id="t1-stat-bracket" data-composition-id="t1-stat-bracket" data-start="0" data-width="1920" data-height="1080">

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-stat-calendar.html

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-stat-cal {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,7 +34,7 @@
         background: radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(23,19,14,0.18) 100%);
       }
       #t1-stat-cal .kicker {
-        position: absolute; left: 130px; top: 260px;
+        position: absolute; left: calc(var(--safe-l) + 34px); top: calc(var(--safe-t) + 206px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
@@ -77,12 +77,12 @@
       }
       #t1-stat-cal .month {
         font-family: var(--font-label); font-weight: var(--wt-black);
-        font-size: 44px; letter-spacing: 0.22em;
+        font-size: calc(44px * var(--type)); letter-spacing: 0.22em;
         text-transform: uppercase; line-height: 1;
       }
       #t1-stat-cal .day-label {
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 22px; letter-spacing: 0.14em;
+        font-size: calc(22px * var(--type)); letter-spacing: 0.14em;
         text-transform: uppercase; opacity: 0.8; margin-top: 6px;
       }
       /* white page body */
@@ -104,13 +104,13 @@
       }
       #t1-stat-cal .cal-stat {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 280px; line-height: 0.88; color: var(--ink);
+        font-size: calc(280px * var(--type)); line-height: 0.88; color: var(--ink);
         font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
         text-align: center; position: relative; z-index: 2;
       }
       #t1-stat-cal .cal-sub {
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 26px; letter-spacing: 0.14em; text-transform: uppercase;
+        font-size: calc(26px * var(--type)); letter-spacing: 0.14em; text-transform: uppercase;
         color: var(--muted); margin-top: 10px; text-align: center;
         position: relative; z-index: 2;
       }
@@ -134,17 +134,32 @@
       }
       /* label and source below the calendar */
       #t1-stat-cal .label {
-        position: absolute; left: 130px; right: 130px; bottom: 220px;
-        font-weight: var(--wt-thin); font-size: 56px; line-height: 1.1;
+        position: absolute; left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px); bottom: calc(var(--safe-b) + 166px);
+        font-weight: var(--wt-thin); font-size: calc(56px * var(--type)); line-height: 1.1;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-stat-cal .label em { font-style: italic; font-weight: var(--wt-black); }
       #t1-stat-cal .source {
-        position: absolute; left: 130px; bottom: 96px;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 42px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: kicker, the calendar centered on the safe area (--cx) near the top,
+         label under it, source at the safe bottom. */
+      [data-format="vertical"] #t1-stat-cal, [data-format="square"] #t1-stat-cal {
+        --cx: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+      }
+      [data-format="vertical"] #t1-stat-cal .kicker, [data-format="square"] #t1-stat-cal .kicker { left: var(--safe-l); top: var(--safe-t); }
+      [data-format="vertical"] #t1-stat-cal .cal-wrap { left: var(--cx); top: calc(var(--safe-t) + 370px); }
+      [data-format="vertical"] #t1-stat-cal .cal-stat { font-size: calc(230px * var(--type)); }
+      [data-format="square"] #t1-stat-cal .cal-wrap { left: var(--cx); top: calc(var(--safe-t) + 310px); }
+      [data-format="square"] #t1-stat-cal .cal { width: 520px; }
+      [data-format="square"] #t1-stat-cal .cal-stat { font-size: 240px; }
+      [data-format="vertical"] #t1-stat-cal .label, [data-format="square"] #t1-stat-cal .label { left: var(--safe-l); right: var(--safe-r); bottom: auto; top: calc(var(--safe-t) + 700px); }
+      [data-format="square"] #t1-stat-cal .label { top: calc(var(--safe-t) + 620px); }
+      [data-format="vertical"] #t1-stat-cal .source, [data-format="square"] #t1-stat-cal .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
   </head>
   <body>