videowright 0.1.0

package/skill/assets/styles/swiss-console/sample/section.ts

@@ -0,0 +1,127 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-section",
+	advances: [1.5, 4.0],
+	voiceover:
+		"Section headers in Swiss Console. A large centered numeral above the section name, framed by hairline rules.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      ">
+        <div data-ref="label" style="
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          margin-bottom: 48px;
+          opacity: 0;
+        ">Part 02 of 04</div>
+
+        <div data-ref="rule-top" style="
+          width: 600px;
+          height: 1px;
+          background: var(--color-fg);
+          margin-bottom: 56px;
+          opacity: 0;
+        "></div>
+
+        <div data-ref="numeral" style="
+          font-family: var(--font-display);
+          font-size: 280px;
+          font-weight: 500;
+          line-height: 0.9;
+          font-variant-numeric: tabular-nums;
+          margin-bottom: 36px;
+          opacity: 0;
+        ">02</div>
+
+        <div data-ref="name" style="
+          font-family: var(--font-display);
+          font-size: 64px;
+          font-weight: 500;
+          margin-bottom: 56px;
+          opacity: 0;
+        ">The Architecture<span style="color: var(--color-accent);">.</span></div>
+
+        <div data-ref="rule-bottom" style="
+          width: 600px;
+          height: 1px;
+          background: var(--color-fg);
+          opacity: 0;
+        "></div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const ruleTop = host?.querySelector('[data-ref="rule-top"]') as HTMLElement;
+		const numeral = host?.querySelector('[data-ref="numeral"]') as HTMLElement;
+		const name = host?.querySelector('[data-ref="name"]') as HTMLElement;
+		const ruleBottom = host?.querySelector('[data-ref="rule-bottom"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateY(-24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		ruleTop.animate(
+			[
+				{ opacity: 0, transform: "scaleX(0)" },
+				{ opacity: 1, transform: "scaleX(1)" },
+			],
+			{ ...opts, duration: 360, delay: 60 },
+		);
+
+		numeral.animate(
+			[
+				{ opacity: 0, transform: "translateY(32px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 120 },
+		);
+
+		name.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 180 },
+		);
+
+		ruleBottom.animate(
+			[
+				{ opacity: 0, transform: "scaleX(0)" },
+				{ opacity: 1, transform: "scaleX(1)" },
+			],
+			{ ...opts, duration: 360, delay: 240 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/sample/stat.ts

@@ -0,0 +1,148 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-stat",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Stat cards in Swiss Console. A large tabular number counts up on the left, label and description on the right.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        overflow: hidden;
+      ">
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 56px; height: 1px; background: var(--color-border);"></div>
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 140px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Finding 03 / Q1 2026</div>
+
+        <div style="position: absolute; left: var(--safe-x); top: 240px; border-top: 1px solid var(--color-fg); padding-top: 24px;">
+          <div data-ref="number" style="
+            font-family: var(--font-display);
+            font-size: 420px;
+            font-weight: 500;
+            line-height: 0.9;
+            font-variant-numeric: tabular-nums;
+            font-feature-settings: 'tnum';
+          "><span data-ref="digits">0</span><span style="color: var(--color-accent);">%</span></div>
+        </div>
+
+        <div data-ref="detail" style="
+          position: absolute;
+          left: 1100px;
+          top: 280px;
+          width: 640px;
+          opacity: 0;
+        ">
+          <div style="height: 1px; background: var(--color-fg); margin-bottom: 20px;"></div>
+          <div style="
+            font-family: var(--font-mono);
+            font-size: 13px;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: var(--color-muted);
+            margin-bottom: 12px;
+          ">Failure-after-step-4 rate</div>
+          <div style="
+            font-family: var(--font-body);
+            font-size: 28px;
+            line-height: 1.4;
+          ">of agent failures occur after the fourth tool call, when context, plan, and toolset have all drifted.</div>
+        </div>
+
+        <div data-ref="sparkline" style="
+          position: absolute;
+          left: 1100px;
+          top: 620px;
+          width: 640px;
+          opacity: 0;
+        ">
+          <div style="
+            font-family: var(--font-mono);
+            font-size: 13px;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: var(--color-muted);
+            margin-bottom: 12px;
+          ">Q1 '25 &rarr; Q1 '26</div>
+          <svg width="100%" height="80" viewBox="0 0 400 80" preserveAspectRatio="none">
+            <polyline points="0,60 50,55 100,52 150,48 200,40 250,32 300,25 350,18 400,12" stroke="var(--color-fg)" stroke-width="1.5" fill="none" />
+            <circle cx="400" cy="12" r="4" fill="var(--color-accent)" />
+          </svg>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const digits = host?.querySelector('[data-ref="digits"]') as HTMLElement;
+		const detail = host?.querySelector('[data-ref="detail"]') as HTMLElement;
+		const sparkline = host?.querySelector('[data-ref="sparkline"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		// Count up from 0 to 84 over 720ms using stepped holds.
+		// Counter/ticker animations are discrete text changes that cannot use WAAPI,
+		// so a ctx.hold loop with DOM text updates is the correct pattern.
+		const target = 84;
+		const steps = 30;
+		const stepDuration = 720 / steps;
+		await ctx.hold(150);
+		for (let i = 1; i <= steps; i++) {
+			const progress = i / steps;
+			const eased = 1 - (1 - progress) ** 4;
+			digits.textContent = String(Math.round(eased * target));
+			await ctx.hold(stepDuration);
+		}
+		digits.textContent = String(target);
+
+		detail.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		sparkline.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 180 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/sample/title.ts

@@ -0,0 +1,148 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-title",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Title cards in Swiss Console. Display headline left-aligned on the grid, micro-labels top-left and top-right.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-body);
+        overflow: hidden;
+      ">
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 56px; height: 1px; background: var(--color-border);"></div>
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="folio" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 32px;
+          font-family: var(--font-mono);
+          font-size: 13px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">01 / Overview</div>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 32px;
+          font-family: var(--font-mono);
+          font-size: 13px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          font-variant-numeric: tabular-nums;
+          opacity: 0;
+        ">01 / 10</div>
+
+        <div data-ref="headline" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 340px;
+          font-family: var(--font-display);
+          font-size: 200px;
+          font-weight: 600;
+          line-height: 0.96;
+          letter-spacing: -0.02em;
+          opacity: 0;
+        ">Console<span style="color: var(--color-accent);">.</span></div>
+
+        <div data-ref="subtitle" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 600px;
+          font-family: var(--font-body);
+          font-size: 28px;
+          font-weight: 400;
+          color: var(--color-muted);
+          max-width: 780px;
+          opacity: 0;
+        ">A workbench for long-running agents. Memory, recovery, observability.</div>
+
+        <div data-ref="build" style="
+          position: absolute;
+          right: var(--safe-x);
+          bottom: 80px;
+          font-family: var(--font-mono);
+          font-size: 13px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-fg);
+          font-variant-numeric: tabular-nums;
+          border-top: 1px solid var(--color-fg);
+          padding-top: 14px;
+          opacity: 0;
+        ">Build 2026.05.10</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const folio = host?.querySelector('[data-ref="folio"]') as HTMLElement;
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const subtitle = host?.querySelector('[data-ref="subtitle"]') as HTMLElement;
+		const build = host?.querySelector('[data-ref="build"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		folio.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		counter.animate(
+			[
+				{ opacity: 0, transform: "translateX(24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 60 },
+		);
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 120 },
+		);
+
+		subtitle.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 180 },
+		);
+
+		build.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 240 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/sample/ui-showcase.ts

@@ -0,0 +1,198 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-ui-showcase",
+	advances: [2.5, 5.0],
+	voiceover:
+		"UI showcases in Swiss Console. A product mock framed in hairline rules with red leader-line callouts in the margins.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        overflow: hidden;
+      ">
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 120px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Fig. 03 / The Console</div>
+
+        <div data-ref="title" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 170px;
+          font-family: var(--font-display);
+          font-size: 56px;
+          font-weight: 500;
+          opacity: 0;
+        ">One view of one run.</div>
+
+        <div data-ref="mock" style="
+          position: absolute;
+          left: 360px;
+          top: 320px;
+          width: 1200px;
+          height: 660px;
+          background: var(--color-bg);
+          border: 1px solid var(--color-fg);
+          opacity: 0;
+        ">
+          <div style="height: 40px; border-bottom: 1px solid var(--color-fg); display: flex; align-items: center; gap: 8px; padding: 0 16px;">
+            <div style="width: 10px; height: 10px; border: 1px solid var(--color-fg);"></div>
+            <div style="width: 10px; height: 10px; border: 1px solid var(--color-fg);"></div>
+            <div style="width: 10px; height: 10px; border: 1px solid var(--color-fg);"></div>
+            <span style="margin-left: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted);">SESSION 41ac.run</span>
+            <span style="margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums;">00:14:22</span>
+          </div>
+          <div style="display: grid; grid-template-columns: 200px 1fr 280px; height: calc(100% - 40px);">
+            <div style="border-right: 1px solid var(--color-border); padding: 16px; display: flex; flex-direction: column; gap: 6px;">
+              <div style="font-size: 14px; padding: 8px 12px; color: var(--color-muted); font-family: var(--font-body);">Run</div>
+              <div style="font-size: 14px; padding: 8px 12px; color: var(--color-muted); font-family: var(--font-body);">Memory</div>
+              <div style="font-size: 14px; padding: 8px 12px; background: var(--color-surface); color: var(--color-fg); font-weight: 500; font-family: var(--font-body);">Plan</div>
+              <div style="font-size: 14px; padding: 8px 12px; color: var(--color-muted); font-family: var(--font-body);">Tools</div>
+              <div style="font-size: 14px; padding: 8px 12px; color: var(--color-muted); font-family: var(--font-body);">Trace</div>
+            </div>
+            <div style="padding: 24px;">
+              <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted);">Plan / v3 (revised 14:22)</div>
+              <div style="margin-top: 16px; display: flex; flex-direction: column; gap: 12px;">
+                <div style="display: flex; gap: 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--color-border);">
+                  <span style="font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 28px;">01</span>
+                  <span style="font-size: 16px; font-family: var(--font-body);">Read eval spec</span>
+                  <span style="margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--color-accent);">done</span>
+                </div>
+                <div style="display: flex; gap: 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--color-border);">
+                  <span style="font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 28px;">02</span>
+                  <span style="font-size: 16px; font-family: var(--font-body);">Generate candidate prompts</span>
+                  <span style="margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--color-accent);">done</span>
+                </div>
+                <div style="display: flex; gap: 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--color-border);">
+                  <span style="font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 28px;">03</span>
+                  <span style="font-size: 16px; font-family: var(--font-body);">Score against rubric</span>
+                  <span style="margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted);">queued</span>
+                </div>
+              </div>
+            </div>
+            <div style="border-left: 1px solid var(--color-border); padding: 16px;">
+              <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted);">Memory / Snapshots</div>
+              <div style="margin-top: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--color-muted);">
+                <div>t=00:02 ✓ snap_001</div>
+                <div>t=00:05 ✓ snap_002</div>
+                <div>t=00:09 ✓ snap_003</div>
+                <div style="color: var(--color-accent);">t=00:14 ● snap_004</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div data-ref="callout-a" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 540px;
+          width: 240px;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent);">A / Plan</div>
+          <div style="font-family: var(--font-body); font-size: 18px; margin-top: 6px; line-height: 1.4;">Versioned. Diff-able. Replayable.</div>
+          <div data-ref="line-a" style="height: 1px; width: 0; background: var(--color-accent); margin-top: 12px;"></div>
+        </div>
+
+        <div data-ref="callout-b" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 760px;
+          width: 220px;
+          text-align: right;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent);">B / Memory</div>
+          <div style="font-family: var(--font-body); font-size: 18px; margin-top: 6px; line-height: 1.4;">Snapshot per tool boundary.</div>
+          <div data-ref="line-b" style="height: 1px; width: 0; background: var(--color-accent); margin-top: 12px; margin-left: auto;"></div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const title = host?.querySelector('[data-ref="title"]') as HTMLElement;
+		const mock = host?.querySelector('[data-ref="mock"]') as HTMLElement;
+		const calloutA = host?.querySelector('[data-ref="callout-a"]') as HTMLElement;
+		const calloutB = host?.querySelector('[data-ref="callout-b"]') as HTMLElement;
+		const lineA = host?.querySelector('[data-ref="line-a"]') as HTMLElement;
+		const lineB = host?.querySelector('[data-ref="line-b"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		title.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 60 },
+		);
+
+		mock.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 120 },
+		);
+
+		calloutA.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 800 },
+		);
+		lineA.animate([{ width: "0px" }, { width: "180px" }], {
+			...opts,
+			duration: 360,
+			delay: 800,
+		});
+
+		calloutB.animate(
+			[
+				{ opacity: 0, transform: "translateX(24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 1000 },
+		);
+		lineB.animate([{ width: "0px" }, { width: "180px" }], {
+			...opts,
+			duration: 360,
+			delay: 1000,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/tokens.css

@@ -0,0 +1,39 @@
+/* Swiss Console — design tokens
+ * White paper, graphite ink, single red accent. Strict 12-col grid.
+ * Information-dense, micro-labels, tabular numerals.
+ */
+:root {
+	--color-bg: #ffffff;
+	--color-fg: #0a0a0a;
+	--color-accent: #e0301e; /* signal red */
+
+	--color-muted: #6b7280;
+	--color-border: #e5e5e5;
+	--color-surface: #f6f6f6;
+
+	--font-display: "Switzer", "Helvetica Neue", system-ui, sans-serif;
+	--font-body: "Switzer", "Helvetica Neue", system-ui, sans-serif;
+	--font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+	--space-sm: 12px;
+	--space-md: 24px;
+	--space-lg: 48px;
+	--space-xl: 96px;
+
+	--duration-fast: 180ms;
+	--duration-normal: 360ms;
+	--duration-slow: 720ms;
+
+	--radius-sm: 0px; /* no rounding */
+	--radius-md: 0px;
+	--stagger: 60ms;
+	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+	--ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--rule-weight: 1px;
+	--scene-hold: 3.5s;
+
+	--safe-x: 96px;
+	--safe-y: 80px;
+	--grid-cols: 12;
+	--grid-gutter: 24px;
+}