Quire

# Quire

## Philosophy

Quire is a torn-paper storybook language with one mechanic: every surface is a sheet of paper laid on a second sheet that peeks out 7px to the right and 9px down. There is no border and no blur, so warmth and depth come from paper alone. Cream ground, berry, moss and apricot like highlighters, sky kept cool for information, and a calm cream sky in the hero art so the headline sits on pixels at full strength. This revision keeps the idea and removes the generic parts: the gradient wash over the hero, the mono eyebrows and tag pill, the three icon cards and the contrast failures.

### Values

- child-friendly warmth without babyish simplification
- narrative worldbuilding carried by the CSS structure, not just illustration
- visible craft, paper grain, and hand-touched imperfection
- gentle emotional guidance through colour and shape
- friendly discoverability through characterful, clearly-styled affordances

### Anti-Values

- sterile product minimalism and white-card SaaS inventories
- hard mechanical geometry or glassmorphism as the dominant motif
- grey hairline borders and accent edges
- mascot overload that replaces information design
- decoration without an idea — flourishes piled on by reflex

### Visual Character

- Cream paper #F4E9D6 with cream-white sheets #FFFBF3, never white and never a wash
- Paste-shadow underlays in peach, sage, rose and mist, offset 7px and 9px, no blur
- Irregular apricot blob behind each section title, rotated about a degree
- Pebble buttons in moss and berry, fully round, with a 3px paper lift
- Torn-paper collage hero with a calm cream sky on the left half
- Sour Gummy display at -0.02em, Averia Serif Libre 17px, Xanh Mono only for hex and measures

### Lineage

> Refined from WhimsiCollage Storybook. This generation is revised in place from the approved range-round-8 specimen quire-i.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4E9D6` |
| surface | `#FFFBF3` |
| surface_2 | `#FBF2E1` |
| text | `#24332E` |
| muted | `#5A5444` |
| accent | `#C9365A` |
| on_accent | `#FFFBF3` |
| moss | `#2F6A55` |
| apricot | `#F0A05E` |
| sky | `#6D8FD6` |
| border | `#E4D7BE` |
| success | `#2F6A55` |
| warning | `#8A5A00` |
| error | `#B3261E` |
| info | `#2F5DA8` |
| underlay_peach | `#F7D4A8` |
| underlay_sage | `#BBD3C2` |
| underlay_rose | `#F6C0CB` |
| underlay_mist | `#C3D2EF` |

### Typography

- **Base Size**: 17px
- **Body Font**: Averia Serif Libre
- **Heading Font**: Sour Gummy
- **Mono Font**: Xanh Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Display Line Height**: 1.12
- **Line Height**: 1.55
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&family=Sour+Gummy:wght@400;500;700&family=Xanh+Mono&display=swap

### Radii

- **None**: 0px
- **Sm**: 16px
- **Md**: 24px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 3px 0 rgba(70,58,42,0.10)
- **Md**: 7px 9px 0 rgba(70,58,42,0.14)
- **Lg**: 0 14px 28px rgba(70,58,42,0.12)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,96]

### Surfaces

- **Treatment**: paper
- **Bg Pattern**: noise
- **Card Style**: cream paper cards on a 7px right, 9px down underlay in a second paper tone, no borders, no blur

### Borders

- **Default Width**: 0px
- **Style**: none
- **Character**: no borders; depth from offset paste-shadows and paper inset rings on fields only

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: snappy lifts and tiny collage rotations, never opacity-only fades; settled state visible with no JS, hidden start-state gated behind html.anim

## Rules

### Composition

Compose each screen as one story spread: a full-bleed collage hero, then a short run of paper patches on underlays. One panel leads and smaller patches tuck beside it. Never nest cards and never use an icon trio.

### Hierarchy

Hierarchy comes from scale, colour patches, and the paste-shadow elevation rather than pure typography. Headings ride irregular blob backplates; primary actions become large friendly pebble shapes; supporting facts tuck into pill ribbons.

### Density

Moderate density with generous breathing room — busy in detail, never cramped in layout. Texture lives inside a disciplined macro-grid with roomy gutters.

### Signature

Every major surface sits on a second paper sheet offset 7px right and 9px down (no blur). Titles ride an irregular apricot blob. Controls are pebbles with a 3px paper lift and a 3px moss focus ring at 3px offset. Facts replace icons: a big figure in moss, a title, one sentence.

## Layout

### Grid

Content caps at 1180px and centres; only the hero spans the viewport. Two-column blocks use 1.1fr and .9fr with a 56px gap; fact cards use three equal minmax(0,1fr) columns with a 30px gap; every grid child has min-width:0.

### Whitespace

Sections sit 84px apart on desktop and 64px on phones. Titles ride a blob with 14px above the text, so a title is never stuck to a container top. Cards pad 30px 28px.

### Density

Generous; moderate detail inside roomy gutters.

### Responsive

Hero text sits on the calm cream sky of the wide plate at 900px and above, and on a tall portrait plate below it, with the nav button hidden on phones. Cards and the palette split stack to one column under 900px. Text uses clamp() with a 17px floor. Above about 1440px the content caps and centres.

### Breakpoints

- **Lg**: 1200px+
- **Md**: 900–1199px
- **Sm**: 640–899px
- **Xs**: below 640px

## Guidance

### Do

- Lay every major surface on an offset second-colour paste-shadow underlay of 7px and 9px; depth comes from paper, not borders
- Keep the hero sky calm and put the headline on it, with no gradient or scrim
- Use berry, moss and apricot like highlighters; keep sky cool for information
- Lead cards with a measured fact in a big moss figure instead of an icon
- Ride section titles on an irregular apricot blob with room above
- Style every control as a pebble with a visible 3px moss focus ring

### Don't

- Don't lay a gradient wash over hero art behind the headline
- Don't add mono uppercase eyebrow labels, tag pills or three icon cards with generic copy
- Don't use borders, hairlines or blurred drop shadows
- Don't mix radii beyond 16 for fields, 24 for surfaces and 9999 for pebbles
- Don't let muted, warning or error text fall under AA on paper
- Don't close with a generic call to action card; end on a plain statement of the idea

### Accessibility

Maintain AA contrast on all copy (ink on paper), use large friendly hit targets, visible moss or berry focus rings, and keep paper texture behind text low-contrast. Respect prefers-reduced-motion; the settled page renders without JavaScript.

## Imagery Direction

### Pairs With

torn-cut-paper-collage

### Summary

Torn-paper collage plates in Decoupage: fibrous deckles, layered cut shapes and small offset underlays on warm board. The hero keeps the left half as calm cream sky so the headline reads on the picture at full strength, with no gradient or scrim over it.

### Subjects

- storybook landscapes
- friendly animals
- everyday objects as props
- warm domestic scenes
- meadows and lanterns

### Usage

One full-bleed hero per landing, painted with var(--hero-image), with a portrait variant under 900px. Keep the sky left half empty for type. Never lay a gradient wash over the art.

### Art Style Id

en-019ef726-f4e5-7052-bd9e-5ae2ab1ab703

---
version: "alpha"
name: "Quire"
description: "Quire is a torn-paper storybook language with one mechanic: every surface is a sheet of paper laid on a second sheet that peeks out 7px to the right and 9px down. There is no border and no blur, so warmth and depth come from paper alone...."
colors:
  bg: "#F4E9D6"
  surface: "#FFFBF3"
  surface_2: "#FBF2E1"
  text: "#24332E"
  muted: "#5A5444"
  accent: "#C9365A"
  on_accent: "#FFFBF3"
  moss: "#2F6A55"
  apricot: "#F0A05E"
  sky: "#6D8FD6"
  border: "#E4D7BE"
  success: "#2F6A55"
  warning: "#8A5A00"
  error: "#B3261E"
  info: "#2F5DA8"
  underlay_peach: "#F7D4A8"
  underlay_sage: "#BBD3C2"
  underlay_rose: "#F6C0CB"
  underlay_mist: "#C3D2EF"
typography:
  headline-lg:
    fontFamily: "Sour Gummy"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Sour Gummy"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Averia Serif Libre"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Xanh Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "24px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-moss:
    backgroundColor: "{colors.moss}"
  color-reference-apricot:
    backgroundColor: "{colors.apricot}"
  color-reference-sky:
    backgroundColor: "{colors.sky}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-underlay_peach:
    backgroundColor: "{colors.underlay_peach}"
  color-reference-underlay_sage:
    backgroundColor: "{colors.underlay_sage}"
  color-reference-underlay_rose:
    backgroundColor: "{colors.underlay_rose}"
  color-reference-underlay_mist:
    backgroundColor: "{colors.underlay_mist}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Quire

## Overview

Quire is a torn-paper storybook language with one mechanic: every surface is a sheet of paper laid on a second sheet that peeks out 7px to the right and 9px down. There is no border and no blur, so warmth and depth come from paper alone. Cream ground, berry, moss and apricot like highlighters, sky kept cool for information, and a calm cream sky in the hero art so the headline sits on pixels at full strength. This revision keeps the idea and removes the generic parts: the gradient wash over the hero, the mono eyebrows and tag pill, the three icon cards and the contrast failures.

### Values

- child-friendly warmth without babyish simplification
- narrative worldbuilding carried by the CSS structure, not just illustration
- visible craft, paper grain, and hand-touched imperfection
- gentle emotional guidance through colour and shape
- friendly discoverability through characterful, clearly-styled affordances

### Anti-Values

- sterile product minimalism and white-card SaaS inventories
- hard mechanical geometry or glassmorphism as the dominant motif
- grey hairline borders and accent edges
- mascot overload that replaces information design
- decoration without an idea — flourishes piled on by reflex

### Visual Character

- Cream paper #F4E9D6 with cream-white sheets #FFFBF3, never white and never a wash
- Paste-shadow underlays in peach, sage, rose and mist, offset 7px and 9px, no blur
- Irregular apricot blob behind each section title, rotated about a degree
- Pebble buttons in moss and berry, fully round, with a 3px paper lift
- Torn-paper collage hero with a calm cream sky on the left half
- Sour Gummy display at -0.02em, Averia Serif Libre 17px, Xanh Mono only for hex and measures

### Lineage

> Refined from WhimsiCollage Storybook. This generation is revised in place from the approved range-round-8 specimen quire-i.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#F4E9D6` |
| surface | `#FFFBF3` |
| surface_2 | `#FBF2E1` |
| text | `#24332E` |
| muted | `#5A5444` |
| accent | `#C9365A` |
| on_accent | `#FFFBF3` |
| moss | `#2F6A55` |
| apricot | `#F0A05E` |
| sky | `#6D8FD6` |
| border | `#E4D7BE` |
| success | `#2F6A55` |
| warning | `#8A5A00` |
| error | `#B3261E` |
| info | `#2F5DA8` |
| underlay_peach | `#F7D4A8` |
| underlay_sage | `#BBD3C2` |
| underlay_rose | `#F6C0CB` |
| underlay_mist | `#C3D2EF` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&family=Sour+Gummy:wght@400;500;700&family=Xanh+Mono&display=swap

- **Headline-Lg**: Sour Gummy, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Sour Gummy, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Averia Serif Libre, 17px, weight 400, line-height 1.55.
- **Label-Md**: Xanh Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`

### Grid

Content caps at 1180px and centres; only the hero spans the viewport. Two-column blocks use 1.1fr and .9fr with a 56px gap; fact cards use three equal minmax(0,1fr) columns with a 30px gap; every grid child has min-width:0.

### Whitespace

Sections sit 84px apart on desktop and 64px on phones. Titles ride a blob with 14px above the text, so a title is never stuck to a container top. Cards pad 30px 28px.

### Density

Generous; moderate detail inside roomy gutters.

### Responsive

Hero text sits on the calm cream sky of the wide plate at 900px and above, and on a tall portrait plate below it, with the nav button hidden on phones. Cards and the palette split stack to one column under 900px. Text uses clamp() with a 17px floor. Above about 1440px the content caps and centres.

### Breakpoints

- **Lg**: 1200px+
- **Md**: 900–1199px
- **Sm**: 640–899px
- **Xs**: below 640px

## Elevation & Depth

### Shadows

- **Sm**: 0 3px 0 rgba(70,58,42,0.10)
- **Md**: 7px 9px 0 rgba(70,58,42,0.14)
- **Lg**: 0 14px 28px rgba(70,58,42,0.12)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: paper
- **Bg Pattern**: noise
- **Card Style**: cream paper cards on a 7px right, 9px down underlay in a second paper tone, no borders, no blur

### Borders

- **Default Width**: 0px
- **Style**: none
- **Character**: no borders; depth from offset paste-shadows and paper inset rings on fields only

## Components

### Composition

Compose each screen as one story spread: a full-bleed collage hero, then a short run of paper patches on underlays. One panel leads and smaller patches tuck beside it. Never nest cards and never use an icon trio.

### Hierarchy

Hierarchy comes from scale, colour patches, and the paste-shadow elevation rather than pure typography. Headings ride irregular blob backplates; primary actions become large friendly pebble shapes; supporting facts tuck into pill ribbons.

### Density

Moderate density with generous breathing room — busy in detail, never cramped in layout. Texture lives inside a disciplined macro-grid with roomy gutters.

### Signature

Every major surface sits on a second paper sheet offset 7px right and 9px down (no blur). Titles ride an irregular apricot blob. Controls are pebbles with a 3px paper lift and a 3px moss focus ring at 3px offset. Facts replace icons: a big figure in moss, a title, one sentence.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-01a11414-4763-7b41-b0cf-1dbbb87c1c38/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11414-4763-7b41-b0cf-1dbbb87c1c38/shadcn.json` (registry theme), `/language/en-01a11414-4763-7b41-b0cf-1dbbb87c1c38/shadcn-components.md` (component recipes) and `/language/en-01a11414-4763-7b41-b0cf-1dbbb87c1c38/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Lay every major surface on an offset second-colour paste-shadow underlay of 7px and 9px; depth comes from paper, not borders
- Do Keep the hero sky calm and put the headline on it, with no gradient or scrim
- Do Use berry, moss and apricot like highlighters; keep sky cool for information
- Do Lead cards with a measured fact in a big moss figure instead of an icon
- Do Ride section titles on an irregular apricot blob with room above
- Do Style every control as a pebble with a visible 3px moss focus ring
- Don't Don't lay a gradient wash over hero art behind the headline
- Don't Don't add mono uppercase eyebrow labels, tag pills or three icon cards with generic copy
- Don't Don't use borders, hairlines or blurred drop shadows
- Don't Don't mix radii beyond 16 for fields, 24 for surfaces and 9999 for pebbles
- Don't Don't let muted, warning or error text fall under AA on paper
- Don't Don't close with a generic call to action card; end on a plain statement of the idea

### Accessibility

Maintain AA contrast on all copy (ink on paper), use large friendly hit targets, visible moss or berry focus rings, and keep paper texture behind text low-contrast. Respect prefers-reduced-motion; the settled page renders without JavaScript.

## Imagery Direction

### Pairs With

torn-cut-paper-collage

### Summary

Torn-paper collage plates in Decoupage: fibrous deckles, layered cut shapes and small offset underlays on warm board. The hero keeps the left half as calm cream sky so the headline reads on the picture at full strength, with no gradient or scrim over it.

### Subjects

- storybook landscapes
- friendly animals
- everyday objects as props
- warm domestic scenes
- meadows and lanterns

### Usage

One full-bleed hero per landing, painted with var(--hero-image), with a portrait variant under 900px. Keep the sky left half empty for type. Never lay a gradient wash over the art.

### Art Style Id

en-019ef726-f4e5-7052-bd9e-5ae2ab1ab703

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quire",
  "type": "registry:theme",
  "title": "Quire shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4E9D6",
      "foreground": "#24332E",
      "card": "#FFFBF3",
      "card-foreground": "#24332E",
      "popover": "#FFFBF3",
      "popover-foreground": "#24332E",
      "primary": "#24332E",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5A5444",
      "muted-foreground": "#24332E",
      "accent": "#C9365A",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#E4D7BE",
      "input": "#E4D7BE",
      "ring": "#C9365A",
      "chart-1": "#24332E",
      "chart-2": "#f4f4f5",
      "chart-3": "#C9365A",
      "chart-4": "#2F6A55",
      "chart-5": "#8A5A00",
      "sidebar": "#FFFBF3",
      "sidebar-foreground": "#24332E",
      "sidebar-primary": "#24332E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5DA8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E4D7BE",
      "sidebar-ring": "#C9365A",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#24332E",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C9365A",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C9365A",
      "chart-1": "#24332E",
      "chart-2": "#f4f4f5",
      "chart-3": "#C9365A",
      "chart-4": "#2F6A55",
      "chart-5": "#8A5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#24332E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C9365A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C9365A",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11414-4763-7b41-b0cf-1dbbb87c1c38",
    "slug": "quire",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "apricot",
        "bg",
        "border",
        "error",
        "info",
        "moss",
        "muted",
        "on_accent",
        "sky",
        "success",
        "surface",
        "surface_2",
        "text",
        "underlay_mist",
        "underlay_peach",
        "underlay_rose",
        "underlay_sage",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```