npm - takomi - Versions diffs - 2.1.40 → 2.1.42 - Mend

takomi 2.1.40 → 2.1.42

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 (662) hide show

package/assets/.agent/skills/hyperframes-creative/frame-presets/cartesian/frame-showcase.html ADDED Viewed

@@ -0,0 +1,1263 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Cartesian</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=Playfair+Display:ital,wght@0,400;1,400&family=Inter:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --bg: #ede8e0;
+        --bg-2: #e2dbd1;
+        --ink: #1a1a1a;
+        --gray: #5a5a5a;
+        --accent: #8a8178;
+        --line: #b8b0a4;
+        --white-overlay: rgba(255, 255, 255, 0.3);
+        --serif: "Playfair Display", serif;
+        --sans: "Inter", sans-serif;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #15140f;
+      }
+      body {
+        background: var(--bg);
+        color: var(--gray);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        font-weight: 400;
+        color: var(--ink);
+      }
+      .label {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 13px;
+        color: var(--accent);
+      }
+      .micro {
+        font-family: var(--sans);
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+      section {
+        padding: 128px 100px;
+        position: relative;
+        overflow: hidden;
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 24px;
+        margin-bottom: 72px;
+      }
+      .sec-head .n {
+        font-family: var(--serif);
+        font-size: 24px;
+        color: var(--accent);
+      }
+      .sec-head h2 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 48px;
+        line-height: 1.1;
+        color: var(--ink);
+      }
+      .sec-head .sp {
+        flex: 1;
+        height: 1px;
+        background: var(--line);
+        align-self: center;
+      }
+      .sec-head .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+      /* geometric decoration */
+      .geo {
+        position: absolute;
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        pointer-events: none;
+      }
+      .geo.dash {
+        border-style: dashed;
+      }
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+      }
+      .cover .geo-ring {
+        position: absolute;
+        width: 46vw;
+        height: 46vw;
+        right: -8vw;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        opacity: 0.5;
+      }
+      .cover .geo-ring::before {
+        content: "";
+        position: absolute;
+        inset: 14%;
+        border: 1px dashed var(--line);
+        border-radius: 50%;
+        opacity: 0.7;
+      }
+      .cover .inner {
+        padding: 0 8vw;
+        position: relative;
+        z-index: 2;
+        max-width: 72%;
+      }
+      .cover .label {
+        margin-bottom: 32px;
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 400;
+        color: var(--ink);
+        font-size: clamp(56px, 8vw, 118px);
+        line-height: 1.06;
+      }
+      .cover h1 em {
+        font-style: italic;
+      }
+      .cover .sub {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: clamp(16px, 1.5vw, 22px);
+        line-height: 1.6;
+        color: var(--gray);
+        margin-top: 32px;
+        max-width: 620px;
+      }
+      .cover .haccent {
+        width: 20vw;
+        height: 1px;
+        background: var(--ink);
+        margin-top: 48px;
+      }
+      .cover .meta {
+        position: absolute;
+        left: 8vw;
+        bottom: 64px;
+        display: flex;
+        gap: 48px;
+        z-index: 2;
+      }
+      .cover .meta .m .v {
+        font-family: var(--serif);
+        font-size: 20px;
+        color: var(--ink);
+        white-space: nowrap;
+      }
+      .cover .meta .m .k {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--accent);
+        margin-top: 6px;
+      }
+      .cover .vline {
+        position: absolute;
+        left: 5vw;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: var(--line);
+        opacity: 0.4;
+      }
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 28px;
+      }
+      .sw .chip {
+        height: 130px;
+        border: 1px solid var(--line);
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-size: 20px;
+        color: var(--ink);
+        margin-top: 16px;
+      }
+      .sw .hex {
+        font-family: var(--sans);
+        font-size: 12px;
+        letter-spacing: 1px;
+        color: var(--accent);
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--gray);
+        margin-top: 10px;
+      }
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 1px solid var(--line);
+      }
+      .type-row .tok {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+      .type-row .m {
+        font-size: 12px;
+        color: var(--gray);
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+        margin-bottom: 22px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 48px;
+        margin-bottom: 64px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .c-card {
+        border: 1px solid var(--line);
+        background: var(--white-overlay);
+        padding: 36px 28px;
+      }
+      .c-card .ic {
+        width: 40px;
+        height: 40px;
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        font-family: var(--serif);
+        color: var(--accent);
+        font-size: 16px;
+        margin-bottom: 24px;
+      }
+      .c-card .t {
+        font-family: var(--serif);
+        font-size: 21px;
+        color: var(--ink);
+        line-height: 1.2;
+      }
+      .c-card .x {
+        font-size: 13px;
+        line-height: 1.6;
+        color: var(--gray);
+        margin-top: 12px;
+      }
+      .agenda .row {
+        display: flex;
+        align-items: baseline;
+        gap: 24px;
+        padding: 18px 0;
+        border-bottom: 1px solid var(--line);
+      }
+      .agenda .row .num {
+        font-family: var(--serif);
+        font-size: 24px;
+        color: var(--accent);
+        min-width: 48px;
+      }
+      .agenda .row .t {
+        font-family: var(--serif);
+        font-size: 22px;
+        color: var(--ink);
+      }
+      .agenda .row .d {
+        font-size: 13px;
+        color: var(--gray);
+        margin-left: auto;
+      }
+      .timeline {
+        border-top: 1px solid var(--line);
+        display: flex;
+        gap: 40px;
+        padding-top: 24px;
+      }
+      .timeline .it {
+        flex: 1;
+      }
+      .timeline .it .y {
+        font-size: 12px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--accent);
+      }
+      .timeline .it .t {
+        font-family: var(--serif);
+        font-size: 19px;
+        color: var(--ink);
+        margin-top: 8px;
+      }
+      .timeline .it .x {
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--gray);
+        margin-top: 8px;
+      }
+      .stats {
+        border-top: 1px solid var(--line);
+        display: flex;
+        gap: 40px;
+        padding-top: 24px;
+      }
+      .stats .st .f {
+        font-family: var(--serif);
+        font-size: 40px;
+        color: var(--ink);
+      }
+      .stats .st .l {
+        font-size: 11px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--accent);
+        margin-top: 8px;
+      }
+      .imgph {
+        aspect-ratio: 4/3;
+        background: var(--bg-2);
+        border: 1px solid var(--line);
+        position: relative;
+        display: grid;
+        place-items: center;
+      }
+      .imgph::before,
+      .imgph::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 150%;
+        height: 1px;
+        background: var(--line);
+        transform-origin: center;
+      }
+      .imgph::before {
+        transform: translate(-50%, -50%) rotate(30deg);
+      }
+      .imgph::after {
+        transform: translate(-50%, -50%) rotate(-30deg);
+      }
+      .imgph span {
+        position: relative;
+        z-index: 2;
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--accent);
+        background: var(--bg-2);
+        padding: 6px 10px;
+      }
+      .team {
+        display: flex;
+        gap: 36px;
+      }
+      .team .p {
+        text-align: center;
+      }
+      .team .ph {
+        width: 110px;
+        height: 110px;
+        border-radius: 50%;
+        border: 1px solid var(--line);
+        background: var(--bg-2);
+        display: grid;
+        place-items: center;
+        font-family: var(--serif);
+        font-size: 34px;
+        color: var(--accent);
+      }
+      .team .nm {
+        font-family: var(--serif);
+        font-size: 17px;
+        color: var(--ink);
+        margin-top: 14px;
+      }
+      .team .ro {
+        font-size: 11px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--accent);
+        margin-top: 4px;
+      }
+      /* 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(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+      .fw .flabel b {
+        color: var(--ink);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--bg);
+        border: 1px solid var(--line);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+      }
+      .frame .fgeo {
+        position: absolute;
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 1;
+      }
+      .frame .fgeo.dash {
+        border-style: dashed;
+      }
+      /* f1 cover */
+      .tf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+      }
+      .tf1 .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-bottom: 2cqw;
+      }
+      .tf1 h3 {
+        font-family: var(--serif);
+        font-size: 8cqw;
+        line-height: 1.04;
+        color: var(--ink);
+        max-width: 62cqw;
+      }
+      .tf1 h3 em {
+        font-style: italic;
+      }
+      .tf1 .sub {
+        font-size: 1.4cqw;
+        line-height: 1.55;
+        color: var(--gray);
+        margin-top: 2cqw;
+        max-width: 46cqw;
+      }
+      .tf1 .ha {
+        width: 18cqw;
+        height: 0.1cqw;
+        background: var(--ink);
+        margin-top: 3cqw;
+      }
+      .tf1 .ring {
+        width: 34cqw;
+        height: 34cqw;
+        right: -6cqw;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: 0.5;
+      }
+      .tf1 .ring::before {
+        content: "";
+        position: absolute;
+        inset: 16%;
+        border: 1px dashed var(--line);
+        border-radius: 50%;
+      }
+      /* f2 agenda (sparse list) */
+      .tf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+      }
+      .tf2 .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-bottom: 1.6cqw;
+      }
+      .tf2 h3 {
+        font-family: var(--serif);
+        font-size: 4cqw;
+        color: var(--ink);
+        margin-bottom: 2.4cqw;
+      }
+      .tf2 .row {
+        display: flex;
+        align-items: baseline;
+        gap: 2cqw;
+        padding: 1.3cqw 0;
+        border-bottom: 0.06cqw solid var(--line);
+      }
+      .tf2 .row .nm {
+        font-family: var(--serif);
+        font-size: 1.8cqw;
+        color: var(--accent);
+        min-width: 4cqw;
+      }
+      .tf2 .row .t {
+        font-family: var(--serif);
+        font-size: 2.2cqw;
+        color: var(--ink);
+      }
+      /* f3 quote */
+      .tf3 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 0 9cqw;
+      }
+      .tf3 .qm {
+        font-family: var(--serif);
+        font-size: 9cqw;
+        line-height: 0.5;
+        color: var(--line);
+        height: 5cqw;
+      }
+      .tf3 .q {
+        font-family: var(--serif);
+        font-size: 4cqw;
+        line-height: 1.2;
+        color: var(--ink);
+        margin-top: 1cqw;
+      }
+      .tf3 .at {
+        font-family: var(--sans);
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-top: 2.4cqw;
+      }
+      .tf3 .ring {
+        width: 26cqw;
+        height: 26cqw;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.3;
+      }
+      /* f4 closing */
+      .tf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .tf4 .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-bottom: 2cqw;
+      }
+      .tf4 h3 {
+        font-family: var(--serif);
+        font-size: 7cqw;
+        line-height: 1.04;
+        color: var(--ink);
+      }
+      .tf4 h3 em {
+        font-style: italic;
+      }
+      .tf4 .ha {
+        width: 14cqw;
+        height: 0.1cqw;
+        background: var(--ink);
+        margin-top: 2.6cqw;
+      }
+      .tf4 .ring {
+        width: 40cqw;
+        height: 40cqw;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.28;
+      }
+      .tf4 .ring::before {
+        content: "";
+        position: absolute;
+        inset: 18%;
+        border: 1px dashed var(--line);
+        border-radius: 50%;
+      }
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .do-card {
+        border: 1px solid var(--line);
+        background: var(--white-overlay);
+        padding: 40px;
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-size: 30px;
+        color: var(--ink);
+        margin-bottom: 24px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-size: 14px;
+        line-height: 1.6;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 14px;
+        color: var(--gray);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--serif);
+        color: var(--accent);
+      }
+      .do-card.do li::before {
+        content: "\2014";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+      }
+      .foot {
+        padding: 64px 100px;
+        border-top: 1px solid var(--line);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-size: 26px;
+        color: var(--ink);
+      }
+      .foot .r {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--accent);
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #ede8e0 !important;
+        --secondary: #1a1a1a !important;
+        --tertiary: #b8b0a4 !important;
+        --accent: #8a8178 !important;
+        --f-disp: "Playfair Display", sans-serif !important;
+        --f-body: "Inter", sans-serif !important;
+        --bg: #ede8e0 !important;
+        --ink: #1a1a1a !important;
+        --accent: #8a8178 !important;
+        --line: #b8b0a4 !important;
+        --serif: "Playfair Display", sans-serif !important;
+        --sans: "Inter", sans-serif !important;
+        --bg-2: #e2dbd1 !important;
+        --gray: #5a5a5a !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="vline"></div>
+      <div class="geo-ring"></div>
+      <div class="inner">
+        <div class="label">Cartesian — Frame System</div>
+        <h1>Restraint,<br />drawn in <em>one line.</em></h1>
+        <div class="sub">
+          A quiet museum-catalog system in motion — Playfair Display, Inter, and a five-tone
+          warm-stone palette, framed by single 1px taupe hairlines and compass-drafted geometry.
+        </div>
+      </div>
+      <div class="meta">
+        <div class="m">
+          <div class="v">1920 × 1080</div>
+          <div class="k">Frame</div>
+        </div>
+        <div class="m">
+          <div class="v">Vol. 01</div>
+          <div class="k">Edition</div>
+        </div>
+        <div class="m">
+          <div class="v">Stone / Ink</div>
+          <div class="k">Palette</div>
+        </div>
+      </div>
+    </section>
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="n">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="lab">Five Stones + Ink</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--bg)"></div>
+          <div class="name">BG Primary</div>
+          <div class="hex">#EDE8E0</div>
+          <div class="role">Warm sandstone canvas.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--bg-2)"></div>
+          <div class="name">BG Secondary</div>
+          <div class="hex">#E2DBD1</div>
+          <div class="role">Deeper stone for placeholders.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="name">Ink</div>
+          <div class="hex">#1A1A1A</div>
+          <div class="role">Headlines + the one black rule.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--gray)"></div>
+          <div class="name">Gray</div>
+          <div class="hex">#5A5A5A</div>
+          <div class="role">Body paragraphs.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--accent)"></div>
+          <div class="name">Accent</div>
+          <div class="hex">#8A8178</div>
+          <div class="role">Labels, numerals, small text.</div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="
+              background: var(--bg);
+              border-color: var(--line);
+              box-shadow:
+                inset 0 0 0 8px var(--bg),
+                inset 0 0 0 9px var(--line);
+            "
+          ></div>
+          <div class="name">Line</div>
+          <div class="hex">#B8B0A4</div>
+          <div class="role">The universal 1px hairline.</div>
+        </div>
+      </div>
+    </section>
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="n">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="lab">Playfair + Inter</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">Playfair Display 400 · sentence case</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 84px; line-height: 1.05">Considered.</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">h2</div>
+          <div class="m">Playfair Display 400 · slide headline</div>
+        </div>
+        <div class="spec"><span class="serif" style="font-size: 52px">Drawn in one line</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Inter 400 · line 1.6 · warm gray</div>
+        </div>
+        <div class="spec">
+          <p style="font-size: 18px; line-height: 1.6; max-width: 680px; color: var(--gray)">
+            Inter carries every paragraph in warm gray — readable, recessive, never competing with
+            the serif statement above it.
+          </p>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">Inter 500 · 3px track · uppercase</div>
+        </div>
+        <div class="spec"><span class="label">Section · Eyebrow</span></div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">quote-mark</div>
+          <div class="m">Playfair Display 400 · 50% taupe</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 80px; color: var(--line)">&ldquo;</span>
+        </div>
+      </div>
+    </section>
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="n">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="lab">1px Hairlines · No Shadow</span>
+      </div>
+      <div class="cgrid">
+        <div class="s4">
+          <div class="cnote">Tracing-paper card</div>
+          <div class="c-card">
+            <div class="ic">I</div>
+            <div class="t">Hairline Border</div>
+            <div class="x">
+              1px taupe outline with a faint white-overlay fill that lets the canvas bleed through.
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Agenda rows</div>
+          <div class="agenda">
+            <div class="row">
+              <span class="num">01</span><span class="t">Restraint</span
+              ><span class="d">Stone on stone</span>
+            </div>
+            <div class="row">
+              <span class="num">02</span><span class="t">Geometry</span
+              ><span class="d">Compass arcs</span>
+            </div>
+            <div class="row" style="border-bottom: 0">
+              <span class="num">03</span><span class="t">Breathing</span
+              ><span class="d">Negative space</span>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Stats cluster</div>
+          <div class="stats">
+            <div class="st">
+              <div class="f">5</div>
+              <div class="l">Stones</div>
+            </div>
+            <div class="st">
+              <div class="f">1px</div>
+              <div class="l">Lines</div>
+            </div>
+            <div class="st">
+              <div class="f">0</div>
+              <div class="l">Shadows</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s5">
+          <div class="cnote">Timeline — 1px rule, no nodes</div>
+          <div class="timeline">
+            <div class="it">
+              <div class="y">Phase 1</div>
+              <div class="t">Survey</div>
+              <div class="x">Establish the stone canvas.</div>
+            </div>
+            <div class="it">
+              <div class="y">Phase 2</div>
+              <div class="t">Draft</div>
+              <div class="x">Lay the compass arcs.</div>
+            </div>
+            <div class="it">
+              <div class="y">Phase 3</div>
+              <div class="t">Frame</div>
+              <div class="x">Hairline the structure.</div>
+            </div>
+          </div>
+        </div>
+        <div class="s3">
+          <div class="cnote">Image placeholder</div>
+          <div class="imgph"><span>Visual Reference</span></div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Team frames</div>
+          <div class="team">
+            <div class="p">
+              <div class="ph">A</div>
+              <div class="nm">Avery</div>
+              <div class="ro">Editor</div>
+            </div>
+            <div class="p">
+              <div class="ph">M</div>
+              <div class="nm">Mori</div>
+              <div class="ro">Design</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="n">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="lab">True 16:9 · cqw Scaled</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · compass ring · left</span></div>
+          <div class="frame tf1">
+            <div class="fgeo ring"></div>
+            <div class="body">
+              <div class="lab">Cartesian — Frame System</div>
+              <h3>Restraint, drawn in <em>one line.</em></h3>
+              <div class="sub">A quiet museum-catalog system in motion.</div>
+              <div class="ha"></div>
+            </div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel"><b>Agenda</b><span>· index · sparse list · left</span></div>
+          <div class="frame tf2">
+            <div class="body">
+              <div class="lab">Contents</div>
+              <h3>Four Considerations</h3>
+              <div class="row"><span class="nm">01</span><span class="t">On Measure</span></div>
+              <div class="row"><span class="nm">02</span><span class="t">On Margin</span></div>
+              <div class="row">
+                <span class="nm">03</span><span class="t">On the Single Line</span>
+              </div>
+              <div class="row" style="border-bottom: 0">
+                <span class="nm">04</span><span class="t">On Silence</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel"><b>Pull Quote</b><span>· quote · compass ring · centered</span></div>
+          <div class="frame tf3">
+            <div class="fgeo ring dash"></div>
+            <div class="body">
+              <div class="qm">&ldquo;</div>
+              <div class="q">Nothing is bold.<br />Nothing is loud.</div>
+              <div class="at">— The System Voice</div>
+            </div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel"><b>Closing Plate</b><span>· closer · centered ring</span></div>
+          <div class="frame tf4">
+            <div class="fgeo ring"></div>
+            <div class="body">
+              <div class="lab">Cartesian</div>
+              <h3>Well-framed, <em>on stone.</em></h3>
+              <div class="ha"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="n">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="lab">Restraint</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>Use a single 1px taupe line for every separator — the hairline is the identity.</li>
+            <li>Set every Playfair headline at weight 400, in ink, sentence case.</li>
+            <li>Render labels in taupe, uppercase, 2–3px tracked.</li>
+            <li>Layer one or two compass rings (solid + dashed) at 20–50% behind content.</li>
+            <li>Let frames breathe — sparse, generous negative space.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>No populist accent color — no red, blue, green; stone and ink only.</li>
+            <li>No bold Playfair, no taupe headlines, no thick borders.</li>
+            <li>No shadows, elevated cards, or rounded rectangles (circles only).</li>
+            <li>Don't crowd the frame — packed layouts read as broken.</li>
+            <li>Never more than two geo decorations per frame.</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(--ink);
+        --cap-canvas: var(--bg);
+        --cap-accent: var(--accent);
+        --cap-accent-2: var(--line);
+      }
+      .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: 1px solid var(--cap-accent-2);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 3.4cqw;
+        line-height: 1.16;
+        letter-spacing: -0.01em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.06em;
+        border-bottom: 1px solid transparent;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: color-mix(in srgb, var(--cap-accent) 18%, var(--cap-canvas));
+        border-bottom: 1px solid var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed var(--line);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--sans);
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 0.95cqw;
+        color: var(--accent);
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="n">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="lab">Lower-third · Karaoke</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">
+            <div
+              class="fgeo ring dash"
+              style="width: 30cqw; height: 30cqw; left: 8cqw; top: 10%; opacity: 0.3"
+            ></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 · marker cleared</span></div>
+          <div class="frame capdemo">
+            <div
+              class="fgeo ring"
+              style="
+                width: 34cqw;
+                height: 34cqw;
+                right: -8cqw;
+                top: 50%;
+                transform: translateY(-50%);
+                opacity: 0.28;
+              "
+            ></div>
+            <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">Cartesian</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="#EDE8E0" />
+        <circle cx="68" cy="50" r="30" fill="none" stroke="#B8B0A4" />
+        <circle cx="68" cy="50" r="20" fill="none" stroke="#B8B0A4" stroke-dasharray="3 3" />
+        <rect x="16" y="44" width="40" height="5" fill="#1A1A1A" />
+        <rect x="16" y="56" width="22" height="2" fill="#8A8178" />
+      </svg>
+    </template>
+  </body>
+</html>