a moder tech statup building houses made out of plastic

DESIGN SYSTEM REQUIREMENTS: Use this exact CSS for styling (inject into the component):

/* Modus Design System CSS */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2221 0.0084 223.8581);
  --card: #ffffff;
  --card-foreground: oklch(0.2221 0.0084 223.8581);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2221 0.0084 223.8581);
  --primary: oklch(0.4862 0.1281 247.0739);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9596 0.0067 286.2737);
  --secondary-foreground: oklch(0.2221 0.0084 223.8581);
  --muted: oklch(0.967 0.0029 264.5419);
  --muted-foreground: oklch(0.4386 0 0);
  --accent: oklch(0.9371 0.0243 238.4079);
  --accent-foreground: oklch(0.2221 0.0084 223.8581);
  --destructive: oklch(0.482 0.1747 24.7604);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9113 0.0109 280.4626);
  --input: oklch(0.9113 0.0109 280.4626);
  --ring: oklch(0.2221 0.0084 223.8581);
  --font-sans: Open Sans, sans-serif;
  --font-serif: Open Sans, sans-serif;
  --font-mono: Open Sans, sans-serif;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.2817 0.0102 242.0545);
  --card-foreground: oklch(1 0 0);
  --popover: oklch(0.2817 0.0102 242.0545);
  --popover-foreground: oklch(1 0 0);
  --primary: oklch(0.6595 0.1598 243.1687);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.346 0.0125 252.9734);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.2817 0.0102 242.0545);
  --muted-foreground: oklch(0.9249 0 0);
  --accent: oklch(0.4862 0.1281 247.0739);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.666 0.1658 22.6649);
  --destructive-foreground: oklch(0 0 0);
  --border: oklch(0.3607 0.0097 241.9204);
  --input: oklch(0.5386 0.0178 269.8201);
  --ring: oklch(0.9596 0.0067 286.2737);
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
}

/* Modus Component Styles */
.modus-button {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.modus-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.modus-card {
  background-color: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.modus-input {
  background-color: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}

.modus-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}

COMPONENT REQUIREMENTS:

• Apply the Modus design system classes (.modus-button, .modus-card, .modus-input)
• Use the CSS custom properties defined above
• Ensure dark mode compatibility with the .dark class
• Use Open Sans font family
• Apply consistent spacing and shadows
• Use OKLCH colors for modern, perceptually uniform color appearance

Please generate the component with this exact styling embedded.