@syncedco/flow 0.1.0

package/examples/wordpress/patterns/contact-cta.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Title: Synced Flow contact CTA
+ * Slug: synced-flow/contact-cta
+ * Categories: synced-flow
+ */
+?>
+<!-- wp:group {"tagName":"section","className":"sf-section","anchor":"contact"} -->
+<section class="wp-block-group sf-section" id="contact">
+  <!-- wp:group {"className":"sf-container sf-cta"} -->
+  <div class="wp-block-group sf-container sf-cta">
+    <!-- wp:heading {"className":"sf-text-h2"} -->
+    <h2 class="sf-text-h2">Ready to build a WordPress site with Synced Flow?</h2>
+    <!-- /wp:heading -->
+    <!-- wp:paragraph {"className":"sf-prose"} -->
+    <p class="sf-prose">Use this pattern as a starting point for contact, booking, or newsletter sections.</p>
+    <!-- /wp:paragraph -->
+    <!-- wp:buttons {"className":"sf-cluster"} -->
+    <div class="wp-block-buttons sf-cluster">
+      <!-- wp:button {"className":"sf-button sf-button--default"} -->
+      <div class="wp-block-button sf-button sf-button--default"><a class="wp-block-button__link wp-element-button" href="mailto:hello@example.com">Contact us</a></div>
+      <!-- /wp:button -->
+    </div>
+    <!-- /wp:buttons -->
+  </div>
+  <!-- /wp:group -->
+</section>
+<!-- /wp:group -->

package/examples/wordpress/patterns/feature-grid.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Title: Synced Flow feature grid
+ * Slug: synced-flow/feature-grid
+ * Categories: synced-flow
+ */
+?>
+<!-- wp:group {"tagName":"section","className":"sf-section"} -->
+<section class="wp-block-group sf-section">
+  <!-- wp:group {"className":"sf-container sf-stack"} -->
+  <div class="wp-block-group sf-container sf-stack">
+    <!-- wp:group {"className":"sf-section-header"} -->
+    <div class="wp-block-group sf-section-header">
+      <!-- wp:paragraph {"className":"sf-kicker"} -->
+      <p class="sf-kicker">Patterns</p>
+      <!-- /wp:paragraph -->
+      <!-- wp:heading {"className":"sf-text-h2"} -->
+      <h2 class="sf-text-h2">Use block markup with Synced Flow classes.</h2>
+      <!-- /wp:heading -->
+    </div>
+    <!-- /wp:group -->
+    <!-- wp:group {"className":"sf-auto-grid"} -->
+    <div class="wp-block-group sf-auto-grid">
+      <!-- wp:group {"className":"sf-card sf-card--interactive sf-stack"} -->
+      <article class="wp-block-group sf-card sf-card--interactive sf-stack"><h3 class="sf-text-h4">Templates</h3><p class="sf-text-muted">Scan block template HTML.</p></article>
+      <!-- /wp:group -->
+      <!-- wp:group {"className":"sf-card sf-card--interactive sf-stack"} -->
+      <article class="wp-block-group sf-card sf-card--interactive sf-stack"><h3 class="sf-text-h4">Patterns</h3><p class="sf-text-muted">Scan PHP patterns and includes.</p></article>
+      <!-- /wp:group -->
+      <!-- wp:group {"className":"sf-card sf-card--interactive sf-stack"} -->
+      <article class="wp-block-group sf-card sf-card--interactive sf-stack"><h3 class="sf-text-h4">Guardrails</h3><p class="sf-text-muted">Run build, lint, and doctor before release.</p></article>
+      <!-- /wp:group -->
+    </div>
+    <!-- /wp:group -->
+  </div>
+  <!-- /wp:group -->
+</section>
+<!-- /wp:group -->

package/examples/wordpress/patterns/landing-hero.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Title: Synced Flow landing hero
+ * Slug: synced-flow/landing-hero
+ * Categories: synced-flow
+ */
+?>
+<!-- wp:group {"tagName":"section","className":"sf-section"} -->
+<section class="wp-block-group sf-section">
+  <!-- wp:group {"className":"sf-container sf-split"} -->
+  <div class="wp-block-group sf-container sf-split">
+    <!-- wp:group {"className":"sf-stack"} -->
+    <div class="wp-block-group sf-stack">
+      <!-- wp:paragraph {"className":"sf-kicker"} -->
+      <p class="sf-kicker">WordPress ready</p>
+      <!-- /wp:paragraph -->
+      <!-- wp:heading {"level":1,"className":"sf-text-display"} -->
+      <h1 class="sf-text-display">A fluid WordPress front page without page-specific CSS.</h1>
+      <!-- /wp:heading -->
+      <!-- wp:paragraph {"className":"sf-text-lead sf-prose"} -->
+      <p class="sf-text-lead sf-prose">Use Synced Flow classes in block templates, parts, and PHP patterns.</p>
+      <!-- /wp:paragraph -->
+      <!-- wp:buttons {"className":"sf-cluster"} -->
+      <div class="wp-block-buttons sf-cluster">
+        <!-- wp:button {"className":"sf-button sf-button--default"} -->
+        <div class="wp-block-button sf-button sf-button--default"><a class="wp-block-button__link wp-element-button" href="#contact">Start a project</a></div>
+        <!-- /wp:button -->
+      </div>
+      <!-- /wp:buttons -->
+    </div>
+    <!-- /wp:group -->
+    <!-- wp:group {"className":"sf-card sf-stack"} -->
+    <div class="wp-block-group sf-card sf-stack">
+      <!-- wp:paragraph {"className":"sf-badge"} -->
+      <p class="sf-badge">Included</p>
+      <!-- /wp:paragraph -->
+      <!-- wp:list {"className":"sf-list-disc"} -->
+      <ul class="sf-list-disc"><li>enqueue-ready CSS</li><li>block theme templates</li><li>PHP pattern scanning</li></ul>
+      <!-- /wp:list -->
+    </div>
+    <!-- /wp:group -->
+  </div>
+  <!-- /wp:group -->
+</section>
+<!-- /wp:group -->

package/examples/wordpress/synced-flow.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from '@syncedco/flow/config'
+import { themePresets } from '@syncedco/flow/presets'
+
+export default defineConfig({
+  scan: ['templates', 'parts', 'patterns', 'assets'],
+  out: 'assets/css/synced-flow.css',
+  includeCore: true,
+  includeDefaults: true,
+  responsiveVariants: false,
+  theme: themePresets.synced,
+})

package/examples/wordpress/templates/front-page.html

@@ -0,0 +1,11 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:main {"className":"sf-stack"} -->
+<main class="sf-stack">
+  <!-- wp:pattern {"slug":"synced-flow/landing-hero"} /-->
+  <!-- wp:pattern {"slug":"synced-flow/feature-grid"} /-->
+  <!-- wp:pattern {"slug":"synced-flow/contact-cta"} /-->
+</main>
+<!-- /wp:main -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

package/examples/wordpress/templates/index.html

@@ -0,0 +1,27 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main","className":"sf-section"} -->
+<main class="wp-block-group sf-section">
+  <!-- wp:group {"className":"sf-container sf-stack"} -->
+  <div class="wp-block-group sf-container sf-stack">
+    <!-- wp:query-title {"type":"archive","className":"sf-text-display"} /-->
+    <!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date"}} -->
+    <div class="wp-block-query">
+      <!-- wp:post-template {"className":"sf-auto-grid"} -->
+        <!-- wp:group {"tagName":"article","className":"sf-card sf-card--interactive sf-stack"} -->
+        <article class="wp-block-group sf-card sf-card--interactive sf-stack">
+          <!-- wp:post-date {"className":"sf-meta"} /-->
+          <!-- wp:post-title {"isLink":true,"className":"sf-text-h4"} /-->
+          <!-- wp:post-excerpt {"className":"sf-text-muted"} /-->
+        </article>
+        <!-- /wp:group -->
+      <!-- /wp:post-template -->
+      <!-- wp:query-pagination {"className":"sf-pagination"} /-->
+    </div>
+    <!-- /wp:query -->
+  </div>
+  <!-- /wp:group -->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

package/examples/wordpress/theme.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/theme.json",
+  "version": 3,
+  "settings": {
+    "appearanceTools": true,
+    "layout": {
+      "contentSize": "72rem",
+      "wideSize": "90rem"
+    }
+  },
+  "styles": {
+    "spacing": {
+      "blockGap": "var(--space-s-l)"
+    },
+    "typography": {
+      "fontFamily": "var(--sf-font-sans)"
+    }
+  }
+}

package/layout.css

@@ -0,0 +1,365 @@
+/* Generated by @syncedco/flow. Edit src/tokens.mjs or scripts/build-css.mjs, then run pnpm build. */
+@layer reset, tokens, base, app, layout, components, utilities;
+@layer layout {
+  .sf-container {
+    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-container-max));
+    margin-inline: auto;
+  }
+
+  .sf-container--narrow { --sf-container-max: var(--sf-container-narrow); }
+  .sf-container--wide { --sf-container-max: var(--sf-container-wide); }
+  .sf-container--full { --sf-container-max: 100%; }
+
+  .sf-rail-shell {
+    --sf-rail-size: 4.25rem;
+    min-block-size: 100svh;
+  }
+
+  .sf-rail-shell__body {
+    min-inline-size: 0;
+  }
+
+  .sf-rail-shell__rail {
+    align-items: center;
+    background:
+      repeating-linear-gradient(-45deg, color-mix(in oklch, var(--sf-colour-foreground) 9%, transparent) 0 .0625rem, transparent .0625rem .4375rem),
+      color-mix(in oklch, var(--sf-colour-background) 92%, black);
+    border-inline-end: 1px solid var(--sf-colour-border);
+    display: none;
+    justify-items: center;
+  }
+
+  .sf-rail-shell__mark,
+  .sf-rail-shell__label {
+    color: var(--sf-colour-primary);
+    font-weight: 900;
+  }
+
+  .sf-rail-shell__label {
+    font-family: var(--sf-font-mono);
+    font-size: var(--sf-step--2);
+    letter-spacing: .18em;
+    text-transform: uppercase;
+    transform: rotate(-90deg);
+    white-space: nowrap;
+  }
+
+  .sf-rail-shell__label::before {
+    background: currentColor;
+    block-size: .25rem;
+    border-radius: var(--sf-radius-full);
+    box-shadow: 0 0 .875rem currentColor;
+    content: "";
+    display: inline-block;
+    inline-size: .25rem;
+    margin-inline-end: var(--sf-space-xs);
+  }
+
+  .sf-section { padding-block: var(--sf-section-space, var(--sf-region)); }
+  .sf-section--compact { --sf-section-space: var(--sf-space-l-xl); }
+  .sf-section--spacious { --sf-section-space: var(--sf-space-2xl-3xl); }
+
+  .sf-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-stack-space, var(--sf-space-s));
+  }
+
+  .sf-stack--tight { --sf-stack-space: var(--sf-space-2xs-xs); }
+  .sf-stack--loose { --sf-stack-space: var(--sf-space-m-xl); }
+
+  .sf-flow > * + * { margin-block-start: var(--sf-flow-space, var(--sf-space-s)); }
+
+  .sf-cluster {
+    align-items: var(--sf-cluster-align, center);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-cluster-space, var(--sf-space-s));
+    justify-content: var(--sf-cluster-justify, flex-start);
+  }
+
+  .sf-repel {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-s);
+    justify-content: space-between;
+  }
+
+  .sf-toolbar {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-s);
+    justify-content: space-between;
+  }
+
+  .sf-app-shell {
+    background: var(--sf-colour-background);
+    color: var(--sf-colour-foreground);
+    display: grid;
+    grid-template-columns: minmax(14rem, var(--sf-app-sidebar-width, 16rem)) minmax(0, 1fr);
+    min-block-size: 100dvh;
+  }
+
+  .sf-app-sidebar {
+    align-self: start;
+    background: var(--sf-colour-surface);
+    border-inline-end: 1px solid var(--sf-colour-border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-space-s);
+    max-block-size: 100dvh;
+    min-block-size: 100dvh;
+    overflow: auto;
+    padding: var(--sf-space-s);
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  .sf-app-sidebar__brand {
+    align-items: center;
+    display: flex;
+    gap: var(--sf-space-xs);
+    padding-block-end: var(--sf-space-s);
+  }
+
+  .sf-app-sidebar > footer {
+    border-block-start: 1px solid var(--sf-colour-border);
+    padding-block-start: var(--sf-space-s);
+  }
+
+  .sf-app-main {
+    min-inline-size: 0;
+    padding: var(--sf-app-main-padding, var(--sf-space-m-l));
+  }
+
+  .sf-grid {
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(var(--sf-grid-columns), minmax(0, 1fr));
+  }
+
+  .sf-grid--2 { --sf-grid-columns: 2; }
+  .sf-grid--3 { --sf-grid-columns: 3; }
+  .sf-grid--4 { --sf-grid-columns: 4; }
+
+  .sf-auto-grid {
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-auto-grid-min, 16rem)), 1fr));
+  }
+
+  .sf-auto-grid--xs { --sf-auto-grid-min: 8rem; }
+  .sf-auto-grid--sm { --sf-auto-grid-min: 12rem; }
+  .sf-auto-grid--lg { --sf-auto-grid-min: 20rem; }
+
+  .sf-split {
+    display: grid;
+    gap: var(--sf-split-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-split-min, 24rem)), 1fr));
+  }
+
+  .sf-split--reverse > :first-child { order: 2; }
+  .sf-split--reverse > :last-child { order: 1; }
+
+  .sf-centre {
+    box-sizing: content-box;
+    margin-inline: auto;
+    max-inline-size: var(--sf-centre-size, 65ch);
+  }
+
+  .sf-centre--narrow { --sf-centre-size: 48ch; }
+  .sf-centre--wide { --sf-centre-size: 80ch; }
+
+  .sf-sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-gutter);
+  }
+
+  .sf-sidebar > :first-child {
+    flex-basis: var(--sf-sidebar-width, 20rem);
+    flex-grow: 1;
+  }
+
+  .sf-sidebar > :last-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(100%, var(--sf-sidebar-content-min, 50%));
+  }
+
+  .sf-switcher {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-gutter);
+  }
+
+  .sf-switcher > * {
+    flex-basis: calc((var(--sf-switcher-threshold, 42rem) - 100%) * 999);
+    flex-grow: 1;
+  }
+
+  .sf-frame {
+    aspect-ratio: var(--sf-frame-ratio, 16 / 9);
+    overflow: hidden;
+  }
+
+  .sf-frame > :where(img, video, iframe) {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  .sf-frame--square { --sf-frame-ratio: 1; }
+  .sf-frame--portrait { --sf-frame-ratio: 4 / 5; }
+  .sf-frame--wide { --sf-frame-ratio: 21 / 9; }
+
+  .sf-cover {
+    display: flex;
+    flex-direction: column;
+    min-block-size: var(--sf-cover-min, 100svh);
+    padding-block: var(--sf-region);
+  }
+
+  .sf-cover > :where(:first-child:not(.sf-cover__centre)) { margin-block-end: auto; }
+  .sf-cover > :where(:last-child:not(.sf-cover__centre)) { margin-block-start: auto; }
+
+  .sf-panel-grid {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 18rem)), 1fr));
+  }
+
+  .sf-metric-grid,
+  .sf-pipeline {
+    display: grid;
+    gap: var(--sf-space-s);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 11rem)), 1fr));
+  }
+
+  .sf-pipeline {
+    --sf-panel-min: 10rem;
+  }
+
+  .sf-scroll-viewport,
+  .sf-scroll-snap-y {
+    block-size: var(--sf-scroll-viewport-size, 100svh);
+    overflow-y: auto;
+    scroll-padding-block: var(--sf-scroll-padding, var(--sf-space-l));
+    scroll-snap-type: y proximity;
+  }
+
+  :where(.sf-scroll-viewport, .sf-scroll-snap-y)[data-snap="mandatory"] {
+    --sf-scroll-snap-stop: always;
+    scroll-snap-type: y mandatory;
+  }
+  .sf-scroll-viewport[data-size="preview"] {
+    --sf-scroll-margin: 0;
+    --sf-scroll-padding: 0;
+    --sf-scroll-viewport-size: min(32rem, 80svh);
+    --sf-scroll-panel-min: min(32rem, 80svh);
+  }
+
+  .sf-scroll-panel {
+    align-content: center;
+    display: grid;
+    min-block-size: var(--sf-scroll-panel-min, 100svh);
+    scroll-margin-block: var(--sf-scroll-margin, var(--sf-space-l));
+    scroll-snap-align: start;
+    scroll-snap-stop: var(--sf-scroll-snap-stop, normal);
+  }
+
+  .sf-sticky-top {
+    position: sticky;
+    inset-block-start: var(--sf-sticky-offset, 0);
+    z-index: var(--sf-sticky-z, 20);
+  }
+
+  .sf-media-object {
+    align-items: var(--sf-media-object-align, start);
+    display: grid;
+    gap: var(--sf-space-s-m);
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .sf-aside-rail {
+    display: grid;
+    gap: var(--sf-gutter);
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sf-chapter {
+    align-items: var(--sf-chapter-align, center);
+    display: grid;
+    gap: var(--sf-chapter-gap, var(--sf-space-xl-2xl));
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sf-chapter__copy {
+    max-inline-size: var(--sf-chapter-copy, 24rem);
+  }
+
+  @media (min-width: 48rem) {
+    .sf-rail-shell {
+      display: grid;
+      grid-template-columns: var(--sf-rail-size) minmax(0, 1fr);
+    }
+
+    .sf-rail-shell__rail {
+      block-size: 100svh;
+      display: grid;
+      grid-template-rows: 3.5rem repeat(var(--sf-rail-items, 5), 1fr);
+      inset-block-start: 0;
+      position: sticky;
+    }
+
+    .sf-aside-rail {
+      grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
+    }
+
+    .sf-aside-rail[data-rail="start"] {
+      grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
+    }
+
+    .sf-chapter {
+      grid-template-columns: minmax(18rem, .42fr) minmax(0, 1fr);
+    }
+  }
+
+  @media (max-width: 56rem) {
+    .sf-app-shell {
+      grid-template-columns: 1fr;
+    }
+
+    .sf-app-main {
+      --sf-app-main-padding: var(--sf-space-s);
+    }
+
+    .sf-app-sidebar {
+      border-block-end: 1px solid var(--sf-colour-border);
+      border-inline-end: 0;
+      max-block-size: none;
+      min-block-size: auto;
+      position: static;
+    }
+
+    .sf-app-sidebar > footer {
+      margin-block-start: 0;
+    }
+  }
+
+  @supports (animation-timeline: view()) {
+    .sf-scroll-panel[data-view-progress] {
+      view-timeline-name: --sf-panel;
+      view-timeline-axis: block;
+    }
+  }
+
+  @container (min-width: 42rem) {
+    .sf-panel-grid[data-density="featured"] > :first-child {
+      grid-column: span 2;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@syncedco/flow",
+  "version": "0.1.0",
+  "description": "AI-native fluid CSS design system for brand-consistent websites and agency builds.",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "css",
+    "design-system",
+    "fluid-css",
+    "design-tokens",
+    "oklch",
+    "cli",
+    "ai",
+    "wordpress",
+    "nextjs",
+    "astro",
+    "vite"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SyncedCo/synced-flow.git"
+  },
+  "homepage": "https://syncedco.com",
+  "bugs": {
+    "url": "https://github.com/SyncedCo/synced-flow/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js"
+    },
+    "./presets": {
+      "types": "./src/presets.d.mts",
+      "import": "./src/presets.mjs"
+    },
+    "./tokens": "./src/tokens.mjs",
+    "./tokens.css": "./tokens.css",
+    "./reset.css": "./reset.css",
+    "./base.css": "./base.css",
+    "./defaults.css": "./defaults.css",
+    "./layout.css": "./layout.css",
+    "./components.css": "./components.css",
+    "./utilities.css": "./utilities.css",
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "*.css",
+    "bin",
+    "dist",
+    "docs",
+    "examples",
+    "skills",
+    "src",
+    "CODE_OF_CONDUCT.md",
+    "CONTRIBUTING.md",
+    "LICENSE",
+    "SECURITY.md",
+    "SUPPORT.md",
+    "TRADEMARKS.md"
+  ],
+  "bin": {
+    "synced-flow": "bin/synced-flow.mjs"
+  },
+  "scripts": {
+    "build": "node scripts/build-css.mjs && tsc -p tsconfig.build.json",
+    "build:css": "node scripts/build-css.mjs",
+    "check": "node scripts/build-css.mjs --check && tsc --noEmit && node scripts/guardrails.mjs",
+    "guardrails": "node scripts/guardrails.mjs",
+    "clean": "rm -rf dist",
+    "prepack": "node scripts/build-css.mjs && tsc -p tsconfig.build.json",
+    "prepare": "node scripts/build-css.mjs && tsc -p tsconfig.build.json",
+    "test": "pnpm build && node --test tests/*.test.mjs",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.21",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/reset.css

@@ -0,0 +1,13 @@
+/* Generated by @syncedco/flow. Edit src/tokens.mjs or scripts/build-css.mjs, then run pnpm build. */
+@layer reset, tokens, base, app, layout, components, utilities;
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  *:where(:not(dialog)) { margin: 0; }
+  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+  body { min-block-size: 100%; }
+  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
+  img, video { block-size: auto; }
+  input, button, textarea, select { font: inherit; }
+  button, input:where([type="button"], [type="submit"], [type="reset"]) { appearance: button; }
+  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
+}