luckiest-co 1.0.32 → 1.0.34

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-ov-split3 {
-        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;
       }
@@ -33,7 +33,7 @@
 
       /* Title row */
       #t1-ov-split3 .title-row {
-        position: absolute; left: 0; right: 0; top: 72px; text-align: center; z-index: 5;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 18px); text-align: center; z-index: 5;
       }
       #t1-ov-split3 .title {
         font-family: var(--font-display); font-weight: var(--wt-bold);
@@ -47,7 +47,7 @@
 
       /* Three-column panel layout - full height */
       #t1-ov-split3 .panels {
-        position: absolute; left: 80px; right: 80px; top: 226px; bottom: 64px;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: 226px; bottom: calc(var(--safe-b) + 10px);
         display: flex; gap: 32px; align-items: stretch; z-index: 4;
       }
 
@@ -83,7 +83,7 @@
         box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28);
         background: rgba(var(--accent-rgb), 0.07);
         font-family: var(--font-mono); font-weight: var(--wt-bold);
-        font-size: 22px; color: var(--accent);
+        font-size: calc(22px * var(--type)); color: var(--accent);
         text-shadow: var(--textglow-accent);
         margin-bottom: 40px; flex-shrink: 0;
       }
@@ -95,7 +95,7 @@
       /* Panel heading */
       #t1-ov-split3 .panel-heading {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 48px; letter-spacing: var(--track-snug); line-height: 1.12;
+        font-size: calc(48px * var(--type)); letter-spacing: var(--track-snug); line-height: 1.12;
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 28px;
       }
@@ -128,6 +128,25 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the three panels stack as rows - number badge left, heading and body right. */
+      [data-format="vertical"] #t1-ov-split3 .title-row, [data-format="square"] #t1-ov-split3 .title-row { top: var(--safe-t); }
+      [data-format="vertical"] #t1-ov-split3 .title { font-size: calc(60px * var(--type)); }
+      [data-format="square"] #t1-ov-split3 .title { font-size: 56px; }
+      [data-format="vertical"] #t1-ov-split3 .panels, [data-format="square"] #t1-ov-split3 .panels { bottom: var(--safe-b); flex-direction: column; gap: 16px; }
+      [data-format="vertical"] #t1-ov-split3 .panels { top: 470px; }
+      [data-format="square"] #t1-ov-split3 .panels { top: 180px; }
+      [data-format="vertical"] #t1-ov-split3 .panel, [data-format="square"] #t1-ov-split3 .panel {
+        display: grid; grid-template-columns: 64px 1fr; column-gap: 28px; align-content: center;
+        padding: 24px 32px 24px 24px;
+      }
+      [data-format="vertical"] #t1-ov-split3 .cat-num, [data-format="square"] #t1-ov-split3 .cat-num { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-bottom: 0; }
+      [data-format="vertical"] #t1-ov-split3 .panel-heading, [data-format="square"] #t1-ov-split3 .panel-heading { grid-column: 2; margin-bottom: 10px; }
+      [data-format="vertical"] #t1-ov-split3 .panel-body, [data-format="square"] #t1-ov-split3 .panel-body { grid-column: 2; }
+      [data-format="vertical"] #t1-ov-split3 .panel-heading { font-size: calc(40px * var(--type)); }
+      [data-format="vertical"] #t1-ov-split3 .panel-body { font-size: calc(22px * var(--type)); line-height: 1.4; }
+      [data-format="square"] #t1-ov-split3 .panel-heading { font-size: 44px; }
+      [data-format="square"] #t1-ov-split3 .panel-body { font-size: 28px; line-height: 1.45; }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-ov-spot {
-        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;
       }
@@ -39,13 +39,13 @@
 
       /* Title */
       #t1-ov-spot .title-row {
-        position: absolute; left: 0; right: 0; top: 88px; text-align: center; z-index: 4;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 34px); text-align: center; z-index: 4;
       }
       #t1-ov-spot .title {
         font-family: var(--font-display); font-weight: var(--wt-bold);
         font-size: var(--size-title); letter-spacing: var(--track-snug); line-height: 1.06;
         color: var(--white); text-shadow: var(--textglow);
-        max-width: 1400px; margin: 0 auto;
+        max-width: none; margin: 0 auto;
       }
       #t1-ov-spot .title em {
         font-style: normal; color: var(--accent); text-shadow: var(--textglow-accent);
@@ -53,7 +53,7 @@
 
       /* Three-column layout: flanker | spotlight | flanker */
       #t1-ov-spot .layout {
-        position: absolute; left: 80px; right: 80px; top: 248px; bottom: 72px;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: 248px; bottom: calc(var(--safe-b) + 18px);
         display: flex; gap: 36px; align-items: stretch; z-index: 4;
       }
 
@@ -131,7 +131,7 @@
       /* Spotlight heading - big */
       #t1-ov-spot .spot-heading {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 68px; letter-spacing: var(--track-snug); line-height: 1.10;
+        font-size: calc(68px * var(--type)); letter-spacing: var(--track-snug); line-height: 1.10;
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 32px;
       }
@@ -142,7 +142,7 @@
       /* Spotlight body */
       #t1-ov-spot .spot-body {
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 31px; line-height: 1.60;
+        font-size: calc(31px * var(--type)); line-height: 1.60;
         color: var(--text-dim);
         max-width: 860px;
       }
@@ -150,7 +150,7 @@
       /* Flanker heading */
       #t1-ov-spot .fl-heading {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 40px; letter-spacing: var(--track-snug); line-height: 1.18;
+        font-size: calc(40px * var(--type)); letter-spacing: var(--track-snug); line-height: 1.18;
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 20px;
       }
@@ -158,7 +158,7 @@
       /* Flanker body */
       #t1-ov-spot .fl-body {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 26px; line-height: 1.55;
+        font-size: calc(26px * var(--type)); line-height: 1.55;
         color: var(--text-dim);
       }
 
@@ -171,6 +171,32 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the spotlight card spans the top, the two flankers sit side by side under it. */
+      [data-format="vertical"] #t1-ov-spot .title-row, [data-format="square"] #t1-ov-spot .title-row { top: var(--safe-t); }
+      [data-format="vertical"] #t1-ov-spot .title { font-size: calc(64px * var(--type)); }
+      [data-format="square"] #t1-ov-spot .title { font-size: 60px; }
+      [data-format="vertical"] #t1-ov-spot .layout, [data-format="square"] #t1-ov-spot .layout {
+        bottom: var(--safe-b); display: grid; grid-template-columns: 1fr 1fr;
+        grid-template-areas: "main main" "left right"; grid-template-rows: auto 1fr; gap: 20px;
+      }
+      [data-format="vertical"] #t1-ov-spot .layout { top: 480px; }
+      [data-format="square"] #t1-ov-spot .layout { top: 230px; }
+      [data-format="vertical"] #t1-ov-spot #spot-main, [data-format="square"] #t1-ov-spot #spot-main { grid-area: main; }
+      [data-format="vertical"] #t1-ov-spot #spot-left, [data-format="square"] #t1-ov-spot #spot-left { grid-area: left; }
+      [data-format="vertical"] #t1-ov-spot #spot-right, [data-format="square"] #t1-ov-spot #spot-right { grid-area: right; }
+      [data-format="vertical"] #t1-ov-spot .spotlight { padding: 36px 36px 36px; }
+      [data-format="square"] #t1-ov-spot .spotlight { padding: 40px 44px; }
+      [data-format="vertical"] #t1-ov-spot .flanker, [data-format="square"] #t1-ov-spot .flanker { padding: 28px 28px 28px 32px; justify-content: flex-start; }
+      [data-format="vertical"] #t1-ov-spot .spot-badge, [data-format="square"] #t1-ov-spot .spot-badge { margin-bottom: 22px; }
+      [data-format="vertical"] #t1-ov-spot .spot-heading { font-size: calc(50px * var(--type)); margin-bottom: 20px; }
+      [data-format="vertical"] #t1-ov-spot .spot-body { font-size: calc(24px * var(--type)); line-height: 1.45; }
+      [data-format="vertical"] #t1-ov-spot .fl-heading { font-size: calc(30px * var(--type)); margin-bottom: 12px; }
+      [data-format="vertical"] #t1-ov-spot .fl-body { font-size: calc(20px * var(--type)); line-height: 1.45; }
+      [data-format="square"] #t1-ov-spot .spot-heading { font-size: 56px; margin-bottom: 20px; }
+      [data-format="square"] #t1-ov-spot .spot-body { font-size: 28px; line-height: 1.45; }
+      [data-format="square"] #t1-ov-spot .fl-heading { font-size: 34px; margin-bottom: 14px; }
+      [data-format="square"] #t1-ov-spot .fl-body { font-size: 24px; line-height: 1.45; }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-ov-statgrid {
-        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;
       }
@@ -35,7 +35,7 @@
 
       /* Title */
       #t1-ov-statgrid .title-row {
-        position: absolute; left: 0; right: 0; top: 80px; text-align: center; z-index: 4;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 26px); text-align: center; z-index: 4;
       }
       #t1-ov-statgrid .title {
         font-family: var(--font-display); font-weight: var(--wt-bold);
@@ -49,7 +49,7 @@
 
       /* 2x2 stat grid */
       #t1-ov-statgrid .stat-grid {
-        position: absolute; left: 140px; right: 140px; top: 238px; bottom: 80px;
+        position: absolute; left: 140px; right: 140px; top: 238px; bottom: calc(var(--safe-b) + 26px);
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr 1fr;
@@ -84,7 +84,7 @@
       /* Big stat number */
       #t1-ov-statgrid .stat-num {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 140px; letter-spacing: var(--track-tight); line-height: 1;
+        font-size: calc(140px * var(--type)); letter-spacing: var(--track-tight); line-height: 1;
         color: var(--white); text-shadow: var(--textglow);
         /* gradient accent fill */
         background: linear-gradient(160deg, var(--white) 10%, var(--accent) 90%);
@@ -96,7 +96,7 @@
       /* Suffix (%, x, K, M, etc.) */
       #t1-ov-statgrid .stat-suffix {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 72px; letter-spacing: var(--track-snug); line-height: 1;
+        font-size: calc(72px * var(--type)); letter-spacing: var(--track-snug); line-height: 1;
         background: linear-gradient(160deg, var(--white) 0%, var(--accent) 100%);
         -webkit-background-clip: text; -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -127,6 +127,18 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the 2x2 grid fills the safe box under a smaller title; numerals shrink to
+         the narrower tiles in vertical. */
+      [data-format="vertical"] #t1-ov-statgrid .title-row, [data-format="square"] #t1-ov-statgrid .title-row { top: var(--safe-t); }
+      [data-format="vertical"] #t1-ov-statgrid .title { font-size: calc(54px * var(--type)); }
+      [data-format="square"] #t1-ov-statgrid .title { font-size: 64px; }
+      [data-format="vertical"] #t1-ov-statgrid .stat-grid, [data-format="square"] #t1-ov-statgrid .stat-grid { left: var(--safe-l); right: var(--safe-r); bottom: var(--safe-b); gap: 24px; }
+      [data-format="vertical"] #t1-ov-statgrid .stat-grid { top: 400px; }
+      [data-format="square"] #t1-ov-statgrid .stat-grid { top: 180px; }
+      [data-format="vertical"] #t1-ov-statgrid .stat-tile, [data-format="square"] #t1-ov-statgrid .stat-tile { padding: 32px 28px; }
+      [data-format="vertical"] #t1-ov-statgrid .stat-num { font-size: calc(110px * var(--type)); }
+      [data-format="vertical"] #t1-ov-statgrid .stat-suffix { font-size: calc(56px * var(--type)); }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-ov-steps {
-        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;
       }
@@ -31,7 +31,7 @@
 
       /* Title */
       #t1-ov-steps .title-row {
-        position: absolute; left: 0; right: 0; top: 88px; text-align: center; z-index: 4;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 34px); text-align: center; z-index: 4;
       }
       #t1-ov-steps .title {
         font-family: var(--font-display); font-weight: var(--wt-bold);
@@ -67,7 +67,7 @@
           inset 0 1px 0 rgba(255,255,255,0.20);
         display: flex; align-items: center; justify-content: center;
         font-family: var(--font-mono); font-weight: 700;
-        font-size: 36px; color: var(--accent);
+        font-size: calc(36px * var(--type)); color: var(--accent);
         text-shadow: var(--textglow-accent);
         margin-bottom: 32px; flex-shrink: 0;
       }
@@ -89,7 +89,7 @@
       }
       .steps-item .step-heading {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 36px; color: var(--white); letter-spacing: var(--track-snug);
+        font-size: calc(36px * var(--type)); color: var(--white); letter-spacing: var(--track-snug);
         line-height: 1.2; margin-bottom: 14px;
         text-shadow: var(--textglow);
       }
@@ -117,6 +117,27 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+      /* Vertical and square: the steps stack - badge left, card right - and the connectors turn to
+         point down between the badges. */
+      [data-format="vertical"] #t1-ov-steps .title-row { top: var(--safe-t); }
+      [data-format="vertical"] #t1-ov-steps .steps-row { left: var(--safe-l); right: var(--safe-r); top: 470px; flex-direction: column; align-items: stretch; }
+      [data-format="vertical"] .steps-item { flex-direction: row; align-items: flex-start; }
+      [data-format="vertical"] .steps-item .num-badge { width: 80px; height: 80px; margin: 0 24px 0 0; }
+      [data-format="vertical"] .steps-item .step-card { padding: 24px 28px; box-sizing: border-box; }
+      [data-format="vertical"] .steps-connector { width: 80px; height: 24px; padding-top: 0; justify-content: center; }
+      [data-format="vertical"] .steps-connector svg { width: 40px; height: 14px; transform: rotate(90deg); }
+      [data-format="square"] #t1-ov-steps .title-row { top: var(--safe-t); }
+      [data-format="square"] #t1-ov-steps .steps-row { left: var(--safe-l); right: var(--safe-r); top: 180px; flex-direction: column; align-items: stretch; }
+      [data-format="square"] .steps-item { flex-direction: row; align-items: flex-start; }
+      [data-format="square"] .steps-item .num-badge { width: 88px; height: 88px; margin: 0 28px 0 0; }
+      [data-format="square"] .steps-item .step-card { padding: 24px 28px; box-sizing: border-box; }
+      [data-format="square"] .steps-connector { width: 88px; height: 32px; padding-top: 0; justify-content: center; }
+      [data-format="square"] .steps-connector svg { width: 48px; height: 14px; transform: rotate(90deg); }
+      [data-format="vertical"] #t1-ov-steps .title { font-size: calc(64px * var(--type)); }
+      [data-format="square"] #t1-ov-steps .title { font-size: 64px; }
+      [data-format="vertical"] .steps-item .step-heading { margin-bottom: 8px; }
+      [data-format="vertical"] .steps-item .step-body { font-size: calc(24px * var(--type)); line-height: 1.45; }
+      [data-format="square"] .steps-item .step-body { font-size: 28px; line-height: 1.45; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-ov-sum {
-        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 @@
 
       /* Title */
       #t1-ov-sum .title-row {
-        position: absolute; left: 0; right: 0; top: 68px; text-align: center; z-index: 5;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 14px); text-align: center; z-index: 5;
       }
       #t1-ov-sum .title {
         font-family: var(--font-display); font-weight: var(--wt-bold);
@@ -46,7 +46,7 @@
 
       /* Stack container */
       #t1-ov-sum .kp-stack {
-        position: absolute; left: 200px; right: 200px; top: 230px; bottom: 72px;
+        position: absolute; left: 200px; right: 200px; top: 230px; bottom: calc(var(--safe-b) + 18px);
         display: flex; flex-direction: column; gap: 0;
         justify-content: space-around; z-index: 4;
       }
@@ -81,7 +81,7 @@
       #t1-ov-sum .kp-num {
         flex-shrink: 0;
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 96px; line-height: 0.9; letter-spacing: var(--track-tight);
+        font-size: calc(96px * var(--type)); line-height: 0.9; letter-spacing: var(--track-tight);
         /* gradient fill: white at top, accent at base */
         background: linear-gradient(175deg, #FFFFFF 20%, var(--accent) 100%);
         -webkit-background-clip: text; background-clip: text;
@@ -107,7 +107,7 @@
       #t1-ov-sum .kp-text { flex: 1; padding-top: 8px; }
       #t1-ov-sum .kp-heading {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 44px; letter-spacing: var(--track-snug); line-height: 1.12;
+        font-size: calc(44px * var(--type)); letter-spacing: var(--track-snug); line-height: 1.12;
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 14px;
       }
@@ -133,6 +133,23 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the three rows fill the safe width with tighter padding and smaller copy;
+         rows grow to fit their text instead of clipping at 200px. */
+      [data-format="vertical"] #t1-ov-sum .title-row, [data-format="square"] #t1-ov-sum .title-row { top: var(--safe-t); }
+      [data-format="vertical"] #t1-ov-sum .title { font-size: calc(54px * var(--type)); }
+      [data-format="square"] #t1-ov-sum .title { font-size: 64px; }
+      [data-format="vertical"] #t1-ov-sum .kp-stack, [data-format="square"] #t1-ov-sum .kp-stack { left: var(--safe-l); right: var(--safe-r); bottom: var(--safe-b); justify-content: center; gap: 14px; }
+      [data-format="vertical"] #t1-ov-sum .kp-stack { top: 400px; }
+      [data-format="square"] #t1-ov-sum .kp-stack { top: 170px; }
+      [data-format="vertical"] #t1-ov-sum .kp-row, [data-format="square"] #t1-ov-sum .kp-row { flex: none; max-height: none; }
+      [data-format="vertical"] #t1-ov-sum .kp-row { gap: 22px; padding: 22px 28px; }
+      [data-format="square"] #t1-ov-sum .kp-row { gap: 32px; padding: 28px 36px; }
+      [data-format="vertical"] #t1-ov-sum .kp-num { font-size: calc(72px * var(--type)); min-width: 60px; }
+      [data-format="vertical"] #t1-ov-sum .kp-heading { font-size: calc(34px * var(--type)); margin-bottom: 8px; }
+      [data-format="vertical"] #t1-ov-sum .kp-body { font-size: calc(22px * var(--type)); line-height: 1.45; }
+      [data-format="square"] #t1-ov-sum .kp-heading { font-size: 36px; margin-bottom: 10px; }
+      [data-format="square"] #t1-ov-sum .kp-body { font-size: 28px; line-height: 1.45; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-ov-tier {
-        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;
       }
@@ -36,7 +36,7 @@
 
       /* Title */
       #t1-ov-tier .title-row {
-        position: absolute; left: 0; right: 0; top: 66px; text-align: center; z-index: 4;
+        position: absolute; left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 12px); text-align: center; z-index: 4;
       }
       #t1-ov-tier .title {
         font-family: var(--font-display); font-weight: var(--wt-bold);
@@ -50,7 +50,7 @@
 
       /* Three-column grid */
       #t1-ov-tier .tiers {
-        position: absolute; left: 120px; right: 120px; top: 210px; bottom: 80px;
+        position: absolute; left: 120px; right: 120px; top: 210px; bottom: calc(var(--safe-b) + 26px);
         display: flex; gap: 40px; z-index: 4;
       }
 
@@ -125,7 +125,7 @@
       /* Tier heading */
       #t1-ov-tier .tier-heading {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 52px; letter-spacing: var(--track-snug); line-height: 1.12;
+        font-size: calc(52px * var(--type)); letter-spacing: var(--track-snug); line-height: 1.12;
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 36px;
       }
@@ -153,7 +153,7 @@
         padding: 20px 0;
         border-bottom: 1px solid rgba(255,255,255,0.06);
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 28px; color: var(--text-dim); line-height: 1.4;
+        font-size: calc(28px * var(--type)); color: var(--text-dim); line-height: 1.4;
       }
       #t1-ov-tier .feat-line:last-child { border-bottom: none; }
       #t1-ov-tier .feat-dot {
@@ -172,7 +172,7 @@
         position: absolute; top: -1px; right: 36px;
         background: var(--accent-2);
         color: var(--ink);
-        font-family: var(--font-mono); font-size: 18px; font-weight: var(--wt-bold);
+        font-family: var(--font-mono); font-size: calc(18px * var(--type)); font-weight: var(--wt-bold);
         letter-spacing: var(--track-wide); text-transform: uppercase;
         padding: 8px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
         box-shadow: 0 4px 18px rgba(var(--accent2-rgb),0.45);
@@ -187,6 +187,29 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the three tiers stack as rows - chip, name and rule on the left, features
+         on the right behind a hairline. */
+      [data-format="vertical"] #t1-ov-tier .title-row, [data-format="square"] #t1-ov-tier .title-row { top: var(--safe-t); }
+      [data-format="vertical"] #t1-ov-tier .tiers, [data-format="square"] #t1-ov-tier .tiers { left: var(--safe-l); right: var(--safe-r); bottom: var(--safe-b); flex-direction: column; gap: 18px; }
+      [data-format="vertical"] #t1-ov-tier .tiers { top: 430px; }
+      [data-format="square"] #t1-ov-tier .tiers { top: 190px; }
+      [data-format="vertical"] #t1-ov-tier .tier-col, [data-format="square"] #t1-ov-tier .tier-col {
+        display: grid; grid-template-rows: auto auto auto; align-content: center; column-gap: 28px;
+        padding: 28px 32px 28px 36px;
+      }
+      [data-format="vertical"] #t1-ov-tier .tier-col { grid-template-columns: 290px 1fr; }
+      [data-format="square"] #t1-ov-tier .tier-col { grid-template-columns: 340px 1fr; }
+      [data-format="vertical"] #t1-ov-tier .tier-chip, [data-format="vertical"] #t1-ov-tier .tier-heading, [data-format="vertical"] #t1-ov-tier .tier-rule, [data-format="square"] #t1-ov-tier .tier-chip, [data-format="square"] #t1-ov-tier .tier-heading, [data-format="square"] #t1-ov-tier .tier-rule { grid-column: 1; }
+      [data-format="vertical"] #t1-ov-tier .tier-chip, [data-format="square"] #t1-ov-tier .tier-chip { justify-self: start; }
+      [data-format="vertical"] #t1-ov-tier .tier-heading, [data-format="square"] #t1-ov-tier .tier-heading { margin-bottom: 14px; }
+      [data-format="vertical"] #t1-ov-tier .tier-rule, [data-format="square"] #t1-ov-tier .tier-rule { margin-bottom: 0; }
+      [data-format="vertical"] #t1-ov-tier .feat-list, [data-format="square"] #t1-ov-tier .feat-list { grid-column: 2; grid-row: 1 / span 3; align-self: center; border-left: 1px solid rgba(255,255,255,0.08); padding-left: 28px; }
+      [data-format="vertical"] #t1-ov-tier .feat-line, [data-format="square"] #t1-ov-tier .feat-line { padding: 10px 0; }
+      [data-format="vertical"] #t1-ov-tier .tier-heading { font-size: calc(40px * var(--type)); }
+      [data-format="vertical"] #t1-ov-tier .feat-line { font-size: calc(22px * var(--type)); gap: 14px; }
+      [data-format="square"] #t1-ov-tier .tier-heading { font-size: 46px; }
+      [data-format="square"] #t1-ov-tier .feat-line { font-size: 26px; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-ov-time {
-        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-body); overflow: hidden;
       }
@@ -33,7 +33,7 @@
       /* Page layout */
       #t1-ov-time .layout {
         position: absolute; inset: 0; z-index: 3;
-        padding: 90px var(--pad) 80px;
+        padding: calc(var(--safe-t) + 36px) var(--safe-r) calc(var(--safe-b) + 26px) calc(var(--safe-l) + 8px);
       }
 
       /* Title */
@@ -69,6 +69,7 @@
         /* height set inline per segment */
       }
 
+      #t1-ov-time #tl-seg-1, #t1-ov-time #tl-seg-2 { height: 198px; }
       /* Glowing dot */
       #t1-ov-time .dot {
         width: 22px; height: 22px; border-radius: 50%;
@@ -111,7 +112,7 @@
       }
       #t1-ov-time .step-heading {
         font-family: var(--font-display); font-weight: var(--wt-semi);
-        font-size: 34px; color: var(--white);
+        font-size: calc(34px * var(--type)); color: var(--white);
         letter-spacing: var(--track-snug); margin-bottom: 8px;
       }
       #t1-ov-time .step-body {
@@ -128,6 +129,26 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: same spine and steps, smaller copy; each step gets a fixed height so the
+         spine segments (step pitch minus the dot) keep the dots on the step labels. */
+      [data-format="vertical"] #t1-ov-time .layout { padding: var(--safe-t) var(--safe-r) var(--safe-b) calc(var(--safe-l) + 12px); }
+      [data-format="square"] #t1-ov-time .layout { padding: var(--safe-t) var(--safe-r) var(--safe-b) calc(var(--safe-l) + 8px); }
+      [data-format="vertical"] #t1-ov-time .card-title { font-size: calc(46px * var(--type)); margin-bottom: 32px; }
+      [data-format="square"] #t1-ov-time .card-title { margin-bottom: 40px; }
+      [data-format="vertical"] #t1-ov-time .spine-col, [data-format="square"] #t1-ov-time .spine-col { width: 40px; }
+      [data-format="vertical"] #t1-ov-time .steps-col { padding-left: 28px; }
+      [data-format="square"] #t1-ov-time .steps-col { padding-left: 36px; }
+      [data-format="vertical"] #t1-ov-time .step { height: 250px; margin-bottom: 24px; }
+      [data-format="square"] #t1-ov-time .step { height: 245px; margin-bottom: 18px; }
+      [data-format="vertical"] #t1-ov-time #tl-seg-1, [data-format="vertical"] #t1-ov-time #tl-seg-2 { height: 252px; }
+      [data-format="square"] #t1-ov-time #tl-seg-1, [data-format="square"] #t1-ov-time #tl-seg-2 { height: 241px; }
+      [data-format="vertical"] #t1-ov-time .step-card { padding: 20px 24px; }
+      [data-format="square"] #t1-ov-time .step-card { padding: 22px 32px; }
+      [data-format="vertical"] #t1-ov-time .step-heading { font-size: calc(26px * var(--type)); }
+      [data-format="vertical"] #t1-ov-time .step-body { font-size: calc(22px * var(--type)); line-height: 1.4; }
+      [data-format="square"] #t1-ov-time .step-heading { font-size: 32px; }
+      [data-format="square"] #t1-ov-time .step-body { font-size: 26px; line-height: 1.4; }
     </style>
   </head>
   <body>
@@ -142,9 +163,9 @@
           <!-- Spine column: dot → seg → dot → seg → dot -->
           <div class="spine-col">
             <div class="dot" id="tl-dot-1"></div>
-            <div class="spine-seg" id="tl-seg-1" style="height:198px;"></div>
+            <div class="spine-seg" id="tl-seg-1"></div>
             <div class="dot" id="tl-dot-2"></div>
-            <div class="spine-seg" id="tl-seg-2" style="height:198px;"></div>
+            <div class="spine-seg" id="tl-seg-2"></div>
             <div class="dot" id="tl-dot-3"></div>
           </div>
 

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-ov-toc {
-        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-body); overflow: hidden;
       }
@@ -38,7 +38,7 @@
         position: absolute; inset: 0; z-index: 3;
         display: flex; flex-direction: column;
         align-items: center;
-        padding: 86px var(--pad) 80px;
+        padding: calc(var(--safe-t) + 32px) var(--safe-r) calc(var(--safe-b) + 26px) var(--safe-l);
       }
 
       /* Title */
@@ -81,7 +81,7 @@
 
       /* Entry index marker */
       #t1-ov-toc .entry-index {
-        font-family: var(--font-mono); font-size: 20px; font-weight: 700;
+        font-family: var(--font-mono); font-size: calc(20px * var(--type)); font-weight: 700;
         color: var(--accent); opacity: 0.7;
         letter-spacing: 0.05em;
         width: 54px; flex-shrink: 0;
@@ -91,7 +91,7 @@
       /* Entry heading label */
       #t1-ov-toc .entry-label {
         font-family: var(--font-display); font-weight: var(--wt-semi);
-        font-size: 40px; color: var(--white);
+        font-size: calc(40px * var(--type)); color: var(--white);
         letter-spacing: var(--track-snug); line-height: 1.15;
         white-space: nowrap;
         flex-shrink: 0;
@@ -114,7 +114,7 @@
 
       /* Section number - right-aligned, monospaced */
       #t1-ov-toc .entry-num {
-        font-family: var(--font-mono); font-size: 30px; font-weight: 700;
+        font-family: var(--font-mono); font-size: calc(30px * var(--type)); font-weight: 700;
         color: var(--accent);
         text-shadow: var(--textglow-accent);
         letter-spacing: 0.04em;
@@ -132,6 +132,16 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: same list in the safe box; entry labels may wrap and the leaders shorten. */
+      [data-format="vertical"] #t1-ov-toc .layout, [data-format="square"] #t1-ov-toc .layout { padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
+      [data-format="vertical"] #t1-ov-toc .card-title, [data-format="square"] #t1-ov-toc .card-title { margin-bottom: 36px; }
+      [data-format="vertical"] #t1-ov-toc .toc-entry, [data-format="square"] #t1-ov-toc .toc-entry { align-items: center; padding: 18px 0; }
+      [data-format="vertical"] #t1-ov-toc .entry-label, [data-format="square"] #t1-ov-toc .entry-label { white-space: normal; flex-shrink: 1; }
+      [data-format="vertical"] #t1-ov-toc .entry-label { font-size: calc(34px * var(--type)); }
+      [data-format="vertical"] #t1-ov-toc .entry-index { width: 46px; }
+      [data-format="vertical"] #t1-ov-toc .leader, [data-format="square"] #t1-ov-toc .leader { min-width: 40px; margin: 0 18px; }
+      [data-format="vertical"] #t1-ov-toc .entry-num { font-size: calc(24px * var(--type)); min-width: 0; }
     </style>
   </head>
   <body>