npm - @mevdragon/vidfarm-devcli - Versions diffs - 0.13.0 → 0.15.0 - Mend

@mevdragon/vidfarm-devcli 0.13.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/.agents/skills/hyperframes-creative/frame-presets/blockframe/frame-showcase.html ADDED Viewed

@@ -0,0 +1,1347 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>BlockFrame</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --black: #000000;
+        --white: #ffffff;
+        --offwhite: #fffdf5;
+        --pink: #fe90e8;
+        --blue: #c0f7fe;
+        --green: #99e885;
+        --yellow: #f7cb46;
+        --cream: #ffdc8b;
+        --disp: "Inter", sans-serif;
+        --mono: "Space Grotesk", monospace;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #111;
+      }
+      body {
+        background: var(--offwhite);
+        color: var(--black);
+        font-family: var(--disp);
+        -webkit-font-smoothing: antialiased;
+      }
+      .disp {
+        font-family: var(--disp);
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        line-height: 0.95;
+        font-weight: 900;
+      }
+      .pill {
+        display: inline-block;
+        border: 3px solid var(--black);
+        background: var(--white);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 6px 16px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 13px;
+      }
+      .dotgrid {
+        background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
+        background-size: 24px 24px;
+      }
+      section {
+        padding: 90px 60px;
+        position: relative;
+        border-bottom: 4px solid var(--black);
+      }
+      .sec-head {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 48px;
+      }
+      .sec-head h2 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        font-size: 46px;
+        line-height: 1;
+      }
+      .sec-head .sp {
+        flex: 1;
+        height: 4px;
+        background: var(--black);
+      }
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        background: var(--offwhite);
+        padding: 60px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .dg {
+        position: absolute;
+        inset: 0;
+        opacity: 0.4;
+        background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
+        background-size: 24px 24px;
+        pointer-events: none;
+      }
+      .cover .inner {
+        position: relative;
+        z-index: 3;
+        max-width: 72%;
+      }
+      .cover .pill {
+        margin-bottom: 28px;
+      }
+      .cover h1 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.04em;
+        line-height: 0.9;
+        font-size: clamp(64px, 9vw, 150px);
+      }
+      .cover .sub {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 1.5;
+        color: var(--black);
+        margin-top: 24px;
+        max-width: 540px;
+      }
+      .cover .deco-rect {
+        position: absolute;
+        top: 18%;
+        right: 8%;
+        width: 200px;
+        height: 130px;
+        background: var(--pink);
+        border: 4px solid var(--black);
+        box-shadow: 8px 8px 0 var(--black);
+        transform: rotate(8deg);
+        z-index: 2;
+      }
+      .cover .deco-rect2 {
+        position: absolute;
+        bottom: 16%;
+        right: 18%;
+        width: 120px;
+        height: 120px;
+        background: var(--blue);
+        border: 4px solid var(--black);
+        box-shadow: 8px 8px 0 var(--black);
+        transform: rotate(-6deg);
+        z-index: 1;
+      }
+      .cover .star {
+        position: absolute;
+        top: 30%;
+        right: 30%;
+        width: 90px;
+        height: 90px;
+        background: var(--yellow);
+        border: 3px solid var(--black);
+        clip-path: polygon(
+          50% 0%,
+          61% 35%,
+          98% 35%,
+          68% 57%,
+          79% 91%,
+          50% 70%,
+          21% 91%,
+          32% 57%,
+          2% 35%,
+          39% 35%
+        );
+        z-index: 4;
+      }
+      .cover .counter {
+        position: absolute;
+        bottom: 30px;
+        left: 60px;
+        border: 3px solid var(--black);
+        background: var(--white);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 10px 18px;
+        font-family: var(--mono);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 14px;
+      }
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 28px;
+      }
+      .sw {
+        border: 4px solid var(--black);
+        background: var(--white);
+        box-shadow: 8px 8px 0 var(--black);
+      }
+      .sw .chip {
+        height: 120px;
+        border-bottom: 4px solid var(--black);
+      }
+      .sw .meta {
+        padding: 16px 18px;
+      }
+      .sw .name {
+        font-family: var(--disp);
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: -0.01em;
+        font-size: 18px;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 12px;
+        letter-spacing: 0.04em;
+        margin-top: 6px;
+      }
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 24px 0;
+        border-bottom: 4px solid var(--black);
+      }
+      .type-row .tok {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+      }
+      .type-row .m {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 11px;
+        color: #444;
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+        margin-bottom: 20px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 32px;
+        margin-bottom: 48px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .fcard {
+        border: 4px solid var(--black);
+        background: var(--white);
+        box-shadow: 8px 8px 0 var(--black);
+        padding: 32px;
+        position: relative;
+        height: 100%;
+      }
+      .fcard .notch {
+        position: absolute;
+        top: -12px;
+        right: 24px;
+        width: 44px;
+        height: 44px;
+        background: var(--yellow);
+        border: 3px solid var(--black);
+      }
+      .fcard .ic {
+        width: 60px;
+        height: 60px;
+        border: 3px solid var(--black);
+        background: var(--blue);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 26px;
+        margin-bottom: 20px;
+      }
+      .fcard .t {
+        font-family: var(--disp);
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 21px;
+        line-height: 1.2;
+      }
+      .fcard .bd {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #222;
+        margin-top: 10px;
+      }
+      .statcard {
+        border: 3px solid var(--black);
+        background: var(--white);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 24px;
+        position: relative;
+      }
+      .statcard .dot {
+        position: absolute;
+        top: 14px;
+        right: 14px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        border: 2px solid var(--black);
+      }
+      .statcard .n {
+        font-family: var(--disp);
+        font-weight: 900;
+        font-size: 48px;
+        line-height: 1;
+      }
+      .statcard .l {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+        margin-top: 8px;
+      }
+      .btn {
+        display: inline-block;
+        border: 3px solid var(--black);
+        background: var(--yellow);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 14px 32px;
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 16px;
+      }
+      .stripe {
+        height: 80px;
+        border: 3px solid var(--black);
+        background: repeating-linear-gradient(
+          45deg,
+          var(--black),
+          var(--black) 4px,
+          var(--green) 4px,
+          var(--green) 12px
+        );
+      }
+      .listnum {
+        display: inline-grid;
+        place-items: center;
+        width: 36px;
+        height: 36px;
+        border: 3px solid var(--black);
+        background: var(--yellow);
+        font-family: var(--mono);
+        font-weight: 700;
+        font-size: 14px;
+      }
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+        color: #555;
+      }
+      .fw .flabel b {
+        color: var(--black);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--offwhite);
+        border: 4px solid var(--black);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+      /* f1 cover */
+      .bf1 {
+        background: var(--cream);
+      }
+      .bf1 .dg {
+        position: absolute;
+        inset: 0;
+        opacity: 0.35;
+        background-image: radial-gradient(circle, var(--black) 0.15cqw, transparent 0.15cqw);
+        background-size: 3cqw 3cqw;
+        z-index: 1;
+      }
+      .bf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .bf1 .pill {
+        display: inline-block;
+        border: 0.25cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.4cqw 0.4cqw 0 var(--black);
+        padding: 0.5cqw 1.2cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 1cqw;
+        margin-bottom: 2cqw;
+        align-self: flex-start;
+      }
+      .bf1 h3 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.04em;
+        line-height: 0.9;
+        font-size: 9.5cqw;
+        max-width: 60cqw;
+      }
+      .bf1 .star {
+        position: absolute;
+        top: 18%;
+        right: 8%;
+        width: 14cqw;
+        height: 14cqw;
+        background: var(--pink);
+        border: 0.3cqw solid var(--black);
+        clip-path: polygon(
+          50% 0%,
+          61% 35%,
+          98% 35%,
+          68% 57%,
+          79% 91%,
+          50% 70%,
+          21% 91%,
+          32% 57%,
+          2% 35%,
+          39% 35%
+        );
+        z-index: 2;
+      }
+      .bf1 .rect {
+        position: absolute;
+        bottom: 16%;
+        right: 16%;
+        width: 16cqw;
+        height: 9cqw;
+        background: var(--blue);
+        border: 0.3cqw solid var(--black);
+        box-shadow: 0.6cqw 0.6cqw 0 var(--black);
+        transform: rotate(-6deg);
+        z-index: 1;
+      }
+      /* f2 feature cards */
+      .bf2 {
+        background: var(--blue);
+      }
+      .bf2 .body {
+        padding: 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .bf2 .pill {
+        align-self: flex-start;
+        border: 0.2cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.3cqw 0.3cqw 0 var(--black);
+        padding: 0.4cqw 1cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.85cqw;
+        margin-bottom: 1.4cqw;
+      }
+      .bf2 h3 {
+        font-family: var(--disp);
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: -0.02em;
+        font-size: 3.6cqw;
+        margin-bottom: 2cqw;
+      }
+      .bf2 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1.6cqw;
+        flex: 1;
+      }
+      .bf2 .c {
+        border: 0.3cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.6cqw 0.6cqw 0 var(--black);
+        padding: 1.8cqw;
+      }
+      .bf2 .c .ic {
+        width: 4cqw;
+        height: 4cqw;
+        border: 0.2cqw solid var(--black);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 1.8cqw;
+        margin-bottom: 1.2cqw;
+      }
+      .bf2 .c .t {
+        font-family: var(--disp);
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 1.5cqw;
+        line-height: 1.15;
+      }
+      .bf2 .c .bd {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 0.95cqw;
+        line-height: 1.5;
+        color: #222;
+        margin-top: 0.6cqw;
+      }
+      /* f3 stat grid (tilted) */
+      .bf3 {
+        background: var(--green);
+      }
+      .bf3 .body {
+        padding: 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .bf3 .pill {
+        align-self: flex-start;
+        border: 0.2cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.3cqw 0.3cqw 0 var(--black);
+        padding: 0.4cqw 1cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.85cqw;
+        margin-bottom: 1.4cqw;
+      }
+      .bf3 h3 {
+        font-family: var(--disp);
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: -0.02em;
+        font-size: 3.6cqw;
+        margin-bottom: 2.4cqw;
+      }
+      .bf3 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2cqw;
+      }
+      .bf3 .sc {
+        border: 0.25cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.4cqw 0.4cqw 0 var(--black);
+        padding: 1.8cqw;
+        position: relative;
+      }
+      .bf3 .sc:nth-child(odd) {
+        transform: rotate(-2deg);
+      }
+      .bf3 .sc:nth-child(even) {
+        transform: rotate(2deg);
+      }
+      .bf3 .sc .dot {
+        position: absolute;
+        top: 1cqw;
+        right: 1cqw;
+        width: 1cqw;
+        height: 1cqw;
+        border-radius: 50%;
+        border: 0.15cqw solid var(--black);
+      }
+      .bf3 .sc .n {
+        font-family: var(--disp);
+        font-weight: 900;
+        font-size: 4.6cqw;
+        line-height: 1;
+      }
+      .bf3 .sc .l {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.85cqw;
+        margin-top: 0.6cqw;
+      }
+      /* f4 close (black) */
+      .bf4 {
+        background: var(--black);
+      }
+      .bf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .bf4 .cardf {
+        border: 0.3cqw solid var(--white);
+        box-shadow: 1.2cqw 1.2cqw 0 var(--yellow);
+        padding: 4cqw 6cqw;
+        position: relative;
+      }
+      .bf4 .pill {
+        border: 0.25cqw solid var(--white);
+        background: var(--black);
+        color: var(--white);
+        box-shadow: 0.5cqw 0.5cqw 0 var(--white);
+        padding: 0.5cqw 1.2cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 1cqw;
+        margin-bottom: 1.6cqw;
+        display: inline-block;
+      }
+      .bf4 h3 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        font-size: 7cqw;
+        line-height: 0.95;
+        color: var(--white);
+      }
+      .bf4 .star {
+        position: absolute;
+        top: -3cqw;
+        right: -3cqw;
+        width: 9cqw;
+        height: 9cqw;
+        background: var(--pink);
+        border: 0.3cqw solid var(--white);
+        clip-path: polygon(
+          50% 0%,
+          61% 35%,
+          98% 35%,
+          68% 57%,
+          79% 91%,
+          50% 70%,
+          21% 91%,
+          32% 57%,
+          2% 35%,
+          39% 35%
+        );
+      }
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 32px;
+      }
+      .do-card {
+        border: 4px solid var(--black);
+        box-shadow: 8px 8px 0 var(--black);
+        padding: 36px;
+      }
+      .do-card.do {
+        background: var(--green);
+      }
+      .do-card.dont {
+        background: var(--white);
+      }
+      .do-card h4 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.02em;
+        font-size: 30px;
+        margin-bottom: 20px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 1.55;
+        padding-left: 26px;
+        position: relative;
+        margin-bottom: 13px;
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--disp);
+        font-weight: 900;
+      }
+      .do-card.do li::before {
+        content: "+";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+      }
+      .foot {
+        padding: 48px 60px;
+        background: var(--black);
+        color: var(--white);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        font-size: 28px;
+      }
+      .foot .r {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 11px;
+        color: #aaa;
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #fffdf5 !important;
+        --secondary: #000000 !important;
+        --tertiary: #ffdc8b !important;
+        --accent: #fe90e8 !important;
+        --f-disp: "Inter", sans-serif !important;
+        --f-body: "Space Grotesk", sans-serif !important;
+        --black: #000000 !important;
+        --offwhite: #fffdf5 !important;
+        --pink: #fe90e8 !important;
+        --cream: #ffdc8b !important;
+        --disp: "Inter", sans-serif !important;
+        --mono: "Space Grotesk", sans-serif !important;
+        --white: #ffffff !important;
+        --blue: #c0f7fe !important;
+        --green: #99e885 !important;
+        --yellow: #f7cb46 !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="dg"></div>
+      <div class="star"></div>
+      <div class="deco-rect"></div>
+      <div class="deco-rect2"></div>
+      <div class="inner">
+        <span class="pill">Frame System · Vol. 01</span>
+        <h1>Loud,<br />bordered,<br />a little crooked.</h1>
+        <div class="sub">
+          A maximalist neobrutalist frame system — 4px ink borders, 8px hard shadows, five candy
+          pastels, and tilted decorations that puncture the grid.
+        </div>
+      </div>
+      <div class="counter">01 / 06</div>
+    </section>
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="pill">Palette</span>
+        <h2>Five Candy Pastels</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--pink)"></div>
+          <div class="meta">
+            <div class="name">Pink</div>
+            <div class="hex">#FE90E8</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--blue)"></div>
+          <div class="meta">
+            <div class="name">Blue</div>
+            <div class="hex">#C0F7FE</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--green)"></div>
+          <div class="meta">
+            <div class="name">Green</div>
+            <div class="hex">#99E885</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--yellow)"></div>
+          <div class="meta">
+            <div class="name">Yellow</div>
+            <div class="hex">#F7CB46 · CTA</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream)"></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#FFDC8B</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--offwhite); border-bottom: 4px solid var(--black)"
+          ></div>
+          <div class="meta">
+            <div class="name">Off-White</div>
+            <div class="hex">#FFFDF5 · canvas</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--white); border-bottom: 4px solid var(--black)"
+          ></div>
+          <div class="meta">
+            <div class="name">White</div>
+            <div class="hex">#FFFFFF · cards</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--black)"></div>
+          <div class="meta">
+            <div class="name">Black</div>
+            <div class="hex">#000000 · all borders</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--pink)">Type</span>
+        <h2>Inter × Space Grotesk</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">heading-xl</div>
+          <div class="m">Inter 900 · uppercase · −0.03em</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 80px">Maximal.</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">heading-lg</div>
+          <div class="m">Inter 800 · uppercase · −0.02em</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-weight: 800; font-size: 50px">Bordered & Bold</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">stat-number</div>
+          <div class="m">Inter 900 · line 1</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-size: 64px; letter-spacing: -0.02em">240</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Inter 500 · sentence case · line 1.6</div>
+        </div>
+        <div class="spec">
+          <p style="font-weight: 500; font-size: 18px; line-height: 1.6; max-width: 640px">
+            Body runs Inter at weight 500, sentence case — the calm against the heavy uppercase
+            display.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">Space Grotesk 600 · uppercase · 0.08em</div>
+        </div>
+        <div class="spec"><span class="pill">Section Eyebrow</span></div>
+      </div>
+    </section>
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--blue)">Components</span>
+        <h2>Borders & Hard Shadows</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="cgrid">
+        <div class="s4">
+          <div class="cnote">Feature card + notch + icon</div>
+          <div class="fcard">
+            <div class="notch"></div>
+            <div class="ic" style="background: var(--pink)">A</div>
+            <div class="t">Bordered Block</div>
+            <div class="bd">4px ink border + 8px hard offset shadow, square corners.</div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Stat cards (tilted) + deco dot</div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
+            <div class="statcard" style="transform: rotate(-2deg)">
+              <div class="dot" style="background: var(--pink)"></div>
+              <div class="n">240</div>
+              <div class="l">Output</div>
+            </div>
+            <div class="statcard" style="transform: rotate(2deg)">
+              <div class="dot" style="background: var(--blue)"></div>
+              <div class="n">3.4×</div>
+              <div class="l">Faster</div>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">CTA · list number · stripe</div>
+          <span class="btn">Click Here →</span>
+          <div style="display: flex; align-items: center; gap: 14px; margin-top: 24px">
+            <span class="listnum">01</span
+            ><span style="font-family: var(--disp); font-weight: 500; font-size: 15px"
+              >Numbered list bullet</span
+            >
+          </div>
+          <div class="stripe" style="margin-top: 24px"></div>
+        </div>
+      </div>
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s6">
+          <div class="cnote">Label pills — pastel variants</div>
+          <div style="display: flex; gap: 16px; flex-wrap: wrap">
+            <span class="pill" style="background: var(--pink)">Pink</span
+            ><span class="pill" style="background: var(--blue)">Blue</span
+            ><span class="pill" style="background: var(--green)">Green</span
+            ><span class="pill" style="background: var(--yellow)">Yellow</span
+            ><span class="pill" style="background: var(--cream)">Cream</span>
+          </div>
+        </div>
+        <div class="s6">
+          <div class="cnote">Icon squares + star burst</div>
+          <div style="display: flex; align-items: center; gap: 20px">
+            <span
+              style="
+                width: 64px;
+                height: 64px;
+                border: 3px solid var(--black);
+                background: var(--green);
+                display: grid;
+                place-items: center;
+                font-family: var(--disp);
+                font-weight: 700;
+                font-size: 26px;
+              "
+              >B</span
+            >
+            <span
+              style="
+                width: 64px;
+                height: 64px;
+                border: 3px solid var(--black);
+                background: var(--yellow);
+                display: grid;
+                place-items: center;
+                font-family: var(--disp);
+                font-weight: 700;
+                font-size: 26px;
+              "
+              >C</span
+            >
+            <span
+              style="
+                width: 64px;
+                height: 64px;
+                background: var(--pink);
+                border: 3px solid var(--black);
+                clip-path: polygon(
+                  50% 0%,
+                  61% 35%,
+                  98% 35%,
+                  68% 57%,
+                  79% 91%,
+                  50% 70%,
+                  21% 91%,
+                  32% 57%,
+                  2% 35%,
+                  39% 35%
+                );
+              "
+            ></span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--yellow)">Frames</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · cream · decorations · left</span></div>
+          <div class="frame bf1">
+            <div class="dg"></div>
+            <div class="star"></div>
+            <div class="rect"></div>
+            <div class="body">
+              <span class="pill">Frame System</span>
+              <h3>Loud, bordered, crooked.</h3>
+            </div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel"><b>Feature Cards</b><span>· catalog · blue ground · 3-up</span></div>
+          <div class="frame bf2">
+            <div class="body">
+              <span class="pill">Three Laws</span>
+              <h3>Cards on Grounds</h3>
+              <div class="row">
+                <div class="c">
+                  <div class="ic" style="background: var(--pink)">A</div>
+                  <div class="t">Border</div>
+                  <div class="bd">4px ink on all.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--green)">B</div>
+                  <div class="t">Shadow</div>
+                  <div class="bd">8px hard offset.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--yellow)">C</div>
+                  <div class="t">Tilt</div>
+                  <div class="bd">A little crooked.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Stat Grid</b><span>· data · green ground · tilted · the dense frame</span>
+          </div>
+          <div class="frame bf3">
+            <div class="body">
+              <span class="pill">By The Numbers</span>
+              <h3>The Tally</h3>
+              <div class="row">
+                <div class="sc">
+                  <div class="dot" style="background: var(--pink)"></div>
+                  <div class="n">240</div>
+                  <div class="l">Output</div>
+                </div>
+                <div class="sc">
+                  <div class="dot" style="background: var(--blue)"></div>
+                  <div class="n">3.4×</div>
+                  <div class="l">Faster</div>
+                </div>
+                <div class="sc">
+                  <div class="dot" style="background: var(--yellow)"></div>
+                  <div class="n">12K</div>
+                  <div class="l">Shipped</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Closing Plate</b><span>· closer · black ground · yellow shadow</span>
+          </div>
+          <div class="frame bf4">
+            <div class="body">
+              <div class="cardf">
+                <div class="star"></div>
+                <span class="pill">The End</span>
+                <h3>Stay loud.</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- PRINCIPLES -->
+    <section style="border-bottom: none">
+      <div class="sec-head">
+        <span class="pill" style="background: var(--green)">Rules</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>4px borders + 8px shadows on primary cards; 3px + 4px on chrome.</li>
+            <li>Cycle pastel grounds across frames; keep the rhythm.</li>
+            <li>Inter 800–900 uppercase, negative tracking, for all display.</li>
+            <li>Open every region with a label-pill eyebrow.</li>
+            <li>Tilt decorations ±2°–12°; add one to every frame.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>No rounded corners (save the stat-deco dot); no blurred shadows.</li>
+            <li>No colored borders (black only, save the close-frame white).</li>
+            <li>No sentence-case Inter display; no sixth pastel.</li>
+            <li>No label rendered as plain text — pill or nothing.</li>
+            <li>Don't blow a headline edge-to-edge — fit to measure.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--black);
+        --cap-canvas: var(--white);
+        --cap-accent: var(--yellow);
+        --cap-accent-2: var(--cream);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 0.4cqw solid var(--cap-ink);
+        border-radius: 0;
+        box-shadow: 0.8cqw 0.8cqw 0 var(--cap-ink);
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.12em 0.32em;
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        font-size: 3.2cqw;
+        line-height: 1.12;
+        letter-spacing: -0.02em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.1em;
+        color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.08em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 0.15cqw dashed rgba(0, 0, 0, 0.4);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 0.9cqw;
+        letter-spacing: 0.08em;
+        color: var(--black);
+        opacity: 0.55;
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--yellow)">Captions</span>
+        <h2>Lower-Third Karaoke</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo" style="background: var(--cream)">
+            <div
+              class="dg"
+              style="
+                position: absolute;
+                inset: 0;
+                opacity: 0.3;
+                background-image: radial-gradient(
+                  circle,
+                  var(--black) 0.15cqw,
+                  transparent 0.15cqw
+                );
+                background-size: 3cqw 3cqw;
+                z-index: 1;
+              "
+            ></div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · stamp cleared</span></div>
+          <div class="frame capdemo" style="background: var(--blue)">
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="foot">
+      <span class="l">BlockFrame</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#FFFDF5" />
+        <rect x="16" y="34" width="46" height="32" fill="#FE90E8" stroke="#000" stroke-width="4" />
+        <rect x="22" y="40" width="46" height="32" fill="#C0F7FE" stroke="#000" stroke-width="4" />
+        <path
+          d="M74 16l4 11h12l-9 7 3 11-10-6-10 6 3-11-9-7h12z"
+          fill="#F7CB46"
+          stroke="#000"
+          stroke-width="2"
+        />
+      </svg>
+    </template>
+  </body>
+</html>