[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import KMapGame from "@/components/k-map-game" export default function Home() { return (

K-Map Solver Challenge

Test your Boolean algebra skills with interactive Karnaugh Maps

) } [V0_FILE]typescriptreact:file="components/k-map-game.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { AlertCircle, Award, CheckCircle2, HelpCircle } from "lucide-react" import KMap from "@/components/k-map" import QuizSection from "@/components/quiz-section" import { generateKMapProblem, minimizeEquation } from "@/lib/kmap-utils" type Difficulty = "easy" | "medium" | "hard" type GameState = "playing" | "quiz" | "completed" export default function KMapGame() { const [difficulty, setDifficulty] = useState("easy") const [level, setLevel] = useState(1) const [gameState, setGameState] = useState("playing") const [currentProblem, setCurrentProblem] = useState(null) const [selectedCells, setSelectedCells] = useState([]) const [score, setScore] = useState(0) const [showHint, setShowHint] = useState(false) const [minimizedEquation, setMinimizedEquation] = useState("") const [userSolution, setUserSolution] = useState("") const [isCorrect, setIsCorrect] = useState(null) // Generate a new problem when difficulty or level changes useEffect(() => { const problem = generateKMapProblem(difficulty, level) setCurrentProblem(problem) setSelectedCells([]) setShowHint(false) setMinimizedEquation("") setUserSolution("") setIsCorrect(null) }, [difficulty, level]) const handleCellToggle = (index: number) => { setSelectedCells((prev) => { if (prev.includes(index)) { return prev.filter((i) => i !== index) } else { return [...prev, index] } }) } const handleSolveClick = () => { const solution = minimizeEquation(currentProblem.truthTable, selectedCells) setMinimizedEquation(solution.equation) setUserSolution(solution.userEquation) const correct = solution.isCorrect setIsCorrect(correct) if (correct) { setScore(score + (difficulty === "easy" ? 10 : difficulty === "medium" ? 20 : 30)) // Check if we need to show quiz after every 5 levels if (level % 5 === 0) { setGameState("quiz") } else { // Move to next level setLevel(level + 1) } } } const handleQuizComplete = (quizScore: number) => { setScore(score + quizScore) setLevel(level + 1) setGameState("playing") } const handleDifficultyChange = (newDifficulty: Difficulty) => { setDifficulty(newDifficulty) setLevel(1) setScore(0) } return (

Level: {level} Score: {score}

handleDifficultyChange(value as Difficulty)} > Easy Medium Hard

{gameState === "playing" && currentProblem && ( Simplify the Boolean Expression

{currentProblem.equation}

{showHint && (

Hint:

{currentProblem.hint}

)}

Your Progress

{5 - ((level - 1) % 5)} more levels until quiz

{isCorrect !== null && (

{isCorrect ? ( ) : ( )}

{isCorrect ? "Correct!" : "Not quite right"}

{isCorrect ? "Great job! The minimized expression is:" : "Try again. The correct grouping would give:"}

{minimizedEquation}

)}

)} {gameState === "quiz" && } {gameState === "completed" && ( Game Completed! Congratulations! You've completed all levels.

Final Score: {score}

You've mastered the K-Map challenges!

)}

) } [V0_FILE]typescriptreact:file="components/k-map.tsx" isEdit="true" "use client" import { cn } from "@/lib/utils" interface KMapProps { size: number truthTable: boolean[] selectedCells: number[] onCellToggle: (index: number) => void variables: number } export default function KMap({ size, truthTable, selectedCells, onCellToggle, variables }: KMapProps) { // Calculate dimensions based on variables const rows = variables <= 2 ? 2 : 4 const cols = variables <= 1 ? 2 : variables === 2 ? 2 : variables === 3 ? 2 : 4 // Generate Gray code for row and column labels const grayCode = (n: number): string[] => { if (n === 1) return ["0", "1"] const prev = grayCode(n - 1) const result = [...prev.map((x) => "0" + x), ...prev.reverse().map((x) => "1" + x)] return result } const rowLabels = grayCode(rows === 2 ? 1 : 2) const colLabels = grayCode(cols === 2 ? 1 : 2) // Convert binary index to Gray code index const binaryToGrayIndex = (binary: number, bits: number): number => { const binaryStr = binary.toString(2).padStart(bits, "0") let grayStr = "" for (let i = 0; i < bits; i++) { if (i === 0) { grayStr += binaryStr[0] } else { grayStr += (Number.parseInt(binaryStr[i - 1]) ^ Number.parseInt(binaryStr[i])).toString() } } return Number.parseInt(grayStr, 2) } // Get the cell value at a specific row and column const getCellValue = (row: number, col: number): boolean => { const rowBits = rows === 2 ? 1 : 2 const colBits = cols === 2 ? 1 : 2 // Convert row and col to their Gray code equivalents const grayRow = Number.parseInt(rowLabels[row], 2) const grayCol = Number.parseInt(colLabels[col], 2) // Combine the bits to get the index in the truth table const index = (grayRow << colBits) | grayCol return truthTable[index] } // Get the cell index for a specific row and column const getCellIndex = (row: number, col: number): number => { const rowBits = rows === 2 ? 1 : 2 const colBits = cols === 2 ? 1 : 2 // Convert row and col to their Gray code equivalents const grayRow = Number.parseInt(rowLabels[row], 2) const grayCol = Number.parseInt(colLabels[col], 2) // Combine the bits to get the index in the truth table return (grayRow << colBits) | grayCol } return (

{colLabels.map((label, i) => ( ))} {rowLabels.map((rowLabel, rowIndex) => ( {colLabels.map((_, colIndex) => { const cellIndex = getCellIndex(rowIndex, colIndex) const isSelected = selectedCells.includes(cellIndex) const cellValue = getCellValue(rowIndex, colIndex) return ( ) })} ))}

	{label}
{rowLabel}	onCellToggle(cellIndex)} > {cellValue ? "1" : "0"}

) } [V0_FILE]typescriptreact:file="components/quiz-section.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Brain, CheckCircle, XCircle } from "lucide-react" import { generateQuizQuestions } from "@/lib/quiz-utils" interface QuizSectionProps { difficulty: "easy" | "medium" | "hard" onComplete: (score: number) => void } export default function QuizSection({ difficulty, onComplete }: QuizSectionProps) { const [questions, setQuestions] = useState([]) const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [selectedAnswer, setSelectedAnswer] = useState(null) const [isAnswerChecked, setIsAnswerChecked] = useState(false) const [score, setScore] = useState(0) const [quizCompleted, setQuizCompleted] = useState(false) useEffect(() => { // Generate 10 quiz questions const quizQuestions = generateQuizQuestions(difficulty) setQuestions(quizQuestions) }, [difficulty]) const handleAnswerSelect = (answer: string) => { if (!isAnswerChecked) { setSelectedAnswer(answer) } } const checkAnswer = () => { if (selectedAnswer === null) return setIsAnswerChecked(true) if (selectedAnswer === questions[currentQuestionIndex].correctAnswer) { setScore(score + 10) } } const nextQuestion = () => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1) setSelectedAnswer(null) setIsAnswerChecked(false) } else { setQuizCompleted(true) } } const handleQuizComplete = () => { onComplete(score) } if (questions.length === 0) { return

Loading questions...

} const currentQuestion = questions[currentQuestionIndex] if (quizCompleted) { return ( Quiz Completed! You've completed the electronics and communication quiz.

Your Score: {score} / 100

{score >= 70 ? "Great job! You have a solid understanding of electronics concepts." : "Keep practicing to improve your knowledge of electronics concepts."}

) } return ( Electronics & Communication Quiz Question {currentQuestionIndex + 1} of {questions.length}

{currentQuestion.question}

{currentQuestion.options.map((option: string, index: number) => (

handleAnswerSelect(option)} > {option} {isAnswerChecked && option === currentQuestion.correctAnswer && ( )} {isAnswerChecked && option === selectedAnswer && option !== currentQuestion.correctAnswer && ( )}

))} {isAnswerChecked && (

Explanation:

{currentQuestion.explanation}

)}

Score: {score} / 100

{!isAnswerChecked ? ( ) : ( )} ) } [V0_FILE]typescriptreact:file="lib/kmap-utils.ts" isEdit="true" // Helper function to generate random boolean array of given size const generateRandomBooleanArray = (size: number): boolean[] => { const result: boolean[] = [] for (let i = 0; i < size; i++) { // Make it more likely to have patterns (for better K-map grouping) if (i > 0 && i % 2 === 0 && Math.random() < 0.7) { result.push(result[i - 1]) } else { result.push(Math.random() < 0.5) } } return result } // Generate variable names based on difficulty const getVariableNames = (difficulty: string): string[] => { if (difficulty === "easy") return ["A", "B"] if (difficulty === "medium") return ["A", "B", "C"] return ["A", "B", "C", "D"] } // Convert truth table to boolean expression const truthTableToExpression = (truthTable: boolean[], variables: string[]): string => { const terms: string[] = [] for (let i = 0; i < truthTable.length; i++) { if (truthTable[i]) { const binaryRep = i.toString(2).padStart(variables.length, "0") const term = binaryRep .split("") .map((bit, index) => (bit === "0" ? `${variables[index]}'` : variables[index])) .join("") terms.push(term) } } if (terms.length === 0) return "0" if (terms.length === truthTable.length) return "1" return terms.map((term) => `(${term})`).join(" + ") } // Generate a K-map problem based on difficulty and level export const generateKMapProblem = (difficulty: string, level: number) => { const variables = difficulty === "easy" ? 2 : difficulty === "medium" ? 3 : 4 const size = Math.pow(2, variables) // Generate truth table const truthTable = generateRandomBooleanArray(size) // Get variable names const variableNames = getVariableNames(difficulty) // Generate boolean expression const equation = truthTableToExpression(truthTable, variableNames) // Generate hint based on difficulty and level let hint = "" if (difficulty === "easy") { hint = "Look for adjacent 1's in the K-map that can be grouped in powers of 2." } else if (difficulty === "medium") { hint = "Remember that in a 3-variable K-map, cells at opposite edges can be considered adjacent." } else { hint = "In a 4-variable K-map, look for patterns that wrap around both horizontally and vertically." } return { truthTable, equation, hint, variables: variableNames, level, } } // Check if two cells are adjacent in a K-map const areAdjacent = (index1: number, index2: number, variables: number): boolean => { // Convert to binary const bin1 = index1.toString(2).padStart(variables, "0") const bin2 = index2.toString(2).padStart(variables, "0") // Count differing bits let diffCount = 0 for (let i = 0; i < variables; i++) { if (bin1[i] !== bin2[i]) diffCount++ } // Cells are adjacent if they differ by exactly one bit return diffCount === 1 } // Check if a group of cells forms a valid group (power of 2 size and all adjacent) const isValidGroup = (cells: number[], variables: number): boolean => { // Group size must be a power of 2 const size = cells.length if ((size & (size - 1)) !== 0) return false // For single cell or full map, it's always valid if (size === 1 || size === Math.pow(2, variables)) return true // Check if all cells in the group are adjacent // This is a simplified check and doesn't handle all K-map adjacency rules for (let i = 0; i < cells.length; i++) { let hasAdjacent = false for (let j = 0; j < cells.length; j++) { if (i !== j && areAdjacent(cells[i], cells[j], variables)) { hasAdjacent = true break } } if (!hasAdjacent) return false } return true } // Minimize boolean expression based on selected cells export const minimizeEquation = (truthTable: boolean[], selectedCells: number[]) => { // Check if all selected cells have value 1 in the truth table const allOnes = selectedCells.every((index) => truthTable[index]) // Check if the selection forms valid groups const variables = Math.log2(truthTable.length) const isValid = isValidGroup(selectedCells, variables) // Generate variable names const variableNames = getVariableNames(variables <= 2 ? "easy" : variables === 3 ? "medium" : "hard") // Generate minimized expression (simplified for this example) let minimizedEquation = "" if (allOnes && isValid) { // This is a simplified minimization algorithm // In a real implementation, you would use Quine-McCluskey or similar // For this example, we'll just create a term that covers the selected cells const commonBits: { [key: number]: string } = {} // Initialize with the first cell's bits const firstCell = selectedCells[0].toString(2).padStart(variables, "0") for (let i = 0; i < variables; i++) { commonBits[i] = firstCell[i] } // Compare with other cells to find which bits can be eliminated for (let i = 1; i < selectedCells.length; i++) { const cellBits = selectedCells[i].toString(2).padStart(variables, "0") for (let j = 0; j < variables; j++) { if (commonBits[j] !== cellBits[j]) { commonBits[j] = "X" // Mark as don't care } } } // Build the minimized term const term = Object.entries(commonBits) .filter(([_, bit]) => bit !== "X") .map(([index, bit]) => { const varIndex = Number.parseInt(index) return bit === "0" ? `${variableNames[varIndex]}'` : variableNames[varIndex] }) .join("") minimizedEquation = term || "1" // If all bits are don't care, the result is 1 } else { // If the selection is invalid, return the original expression minimizedEquation = truthTableToExpression(truthTable, variableNames) } // Generate user's equation based on their selection const userEquation = selectedCells.length > 0 ? selectedCells .map((index) => { const binaryRep = index.toString(2).padStart(variables, "0") return binaryRep .split("") .map((bit, i) => (bit === "0" ? `${variableNames[i]}'` : variableNames[i])) .join("") }) .join(" + ") : "0" return { equation: minimizedEquation, userEquation, isCorrect: allOnes && isValid, } } [V0_FILE]typescriptreact:file="lib/quiz-utils.ts" isEdit="true" // Database of electronics and communication questions const questionDatabase = [ { question: "What is the Boolean expression for a 2-input OR gate?", options: ["A + B", "A · B", "A ⊕ B", "A'"], correctAnswer: "A + B", explanation: "The OR gate outputs 1 if either or both inputs are 1, which is represented by the Boolean expression A + B.", }, { question: "Which logic gate performs the operation of addition modulo-2?", options: ["AND", "OR", "XOR", "NAND"], correctAnswer: "XOR", explanation: "The XOR (Exclusive OR) gate performs addition modulo-2, outputting 1 only when the inputs differ.", }, { question: "What is the primary advantage of using K-maps for Boolean minimization?", options: [ "They work for any number of variables", "They provide a visual method for simplification", "They are faster than algebraic methods for complex expressions", "They always produce the absolute minimum expression", ], correctAnswer: "They provide a visual method for simplification", explanation: "K-maps provide a visual method for simplifying Boolean expressions by identifying adjacent groups of 1s that can be combined.", }, { question: "In digital electronics, what does the term 'don't care' condition mean?", options: [ "An input combination that never occurs", "An output value that can be either 0 or 1 without affecting circuit operation", "A logic gate with unpredictable behavior", "A design error in the circuit", ], correctAnswer: "An output value that can be either 0 or 1 without affecting circuit operation", explanation: "A 'don't care' condition refers to input combinations where the output can be either 0 or 1, as these states never occur or are not important for the circuit's function.", }, { question: "What is De Morgan's theorem?", options: ["(A+B)' = A' · B'", "(A·B)' = A' + B'", "Both of the above", "None of the above"], correctAnswer: "Both of the above", explanation: "De Morgan's theorem states that (A+B)' = A' · B' and (A·B)' = A' + B', which are fundamental rules for manipulating Boolean expressions.", }, { question: "Which of the following is a universal gate?", options: ["AND", "OR", "XOR", "NAND"], correctAnswer: "NAND", explanation: "NAND is a universal gate because any Boolean function can be implemented using only NAND gates.", }, { question: "What is the minimum number of NAND gates required to implement an XOR function?", options: ["2", "3", "4", "5"], correctAnswer: "4", explanation: "An XOR function requires at least 4 NAND gates for implementation when constructed from basic NAND operations.", }, { question: "In a 3-variable K-map, how many cells are there?", options: ["4", "8", "16", "32"], correctAnswer: "8", explanation: "A 3-variable K-map has 2³ = 8 cells, arranged in a 2×4 or 4×2 grid.", }, { question: "What is the purpose of a multiplexer in digital circuits?", options: [ "To combine multiple inputs into one output", "To select one of many inputs and route it to the output", "To convert analog signals to digital", "To store binary information", ], correctAnswer: "To select one of many inputs and route it to the output", explanation: "A multiplexer (MUX) selects one of several input signals and forwards it to a single output line based on the values of selection inputs.", }, { question: "What is the difference between combinational and sequential logic circuits?", options: [ "Combinational circuits use transistors while sequential circuits use gates", "Combinational circuits have feedback while sequential circuits don't", "Combinational circuits depend only on current inputs while sequential circuits depend on both current inputs and previous states", "There is no difference", ], correctAnswer: "Combinational circuits depend only on current inputs while sequential circuits depend on both current inputs and previous states", explanation: "Combinational circuits produce outputs based solely on the current inputs, while sequential circuits' outputs depend on both current inputs and the circuit's previous state (memory).", }, { question: "What is the function of a flip-flop in digital electronics?", options: ["To amplify signals", "To store one bit of data", "To convert between logic levels", "To filter noise"], correctAnswer: "To store one bit of data", explanation: "A flip-flop is a bistable multivibrator that can store one bit of data, making it the basic storage element in sequential logic circuits.", }, { question: "Which of the following is NOT a basic property of Boolean algebra?", options: ["Commutative property", "Associative property", "Distributive property", "Exponential property"], correctAnswer: "Exponential property", explanation: "The basic properties of Boolean algebra include commutative, associative, distributive, identity, and complement properties. There is no 'exponential property' in Boolean algebra.", }, { question: "What is the output of an AND gate when all inputs are 1?", options: ["Always 0", "Always 1", "Depends on the number of inputs", "Unpredictable"], correctAnswer: "Always 1", explanation: "An AND gate outputs 1 only when all inputs are 1, regardless of the number of inputs.", }, { question: "In a 4-variable K-map, what is the maximum number of variables that can be eliminated in a group of 8 cells?", options: ["1", "2", "3", "4"], correctAnswer: "3", explanation: "In a group of 8 cells (2³) in a 4-variable K-map, 3 variables can be eliminated, leaving just one variable in the minimized term.", }, { question: "What is the Boolean expression for a 2-input XNOR gate?", options: ["A ⊕ B", "(A ⊕ B)'", "A' + B'", "A' · B'"], correctAnswer: "(A ⊕ B)'", explanation: "The XNOR gate outputs 1 when both inputs are the same, which is represented by the Boolean expression (A ⊕ B)' or A ⊙ B.", }, { question: "Which of the following is true about essential prime implicants?", options: [ "They are always included in the minimal expression", "They are never included in the minimal expression", "They cover at least one minterm that is not covered by any other prime implicant", "They always consist of a single literal", ], correctAnswer: "They cover at least one minterm that is not covered by any other prime implicant", explanation: "An essential prime implicant covers at least one minterm that cannot be covered by any other prime implicant, making it necessary for the minimal expression.", }, { question: "What is the purpose of a decoder in digital circuits?", options: [ "To encode binary data into a more compact form", "To convert from one code to another", "To activate one of several outputs based on a binary input combination", "To select one of many inputs and route it to the output", ], correctAnswer: "To activate one of several outputs based on a binary input combination", explanation: "A decoder activates one of 2^n output lines based on the combination of n input lines, essentially converting binary code to one-hot code.", }, { question: "What is the advantage of using CMOS technology in digital circuits?", options: [ "Higher speed than other technologies", "Lower power consumption", "Simpler manufacturing process", "Better noise immunity", ], correctAnswer: "Lower power consumption", explanation: "CMOS (Complementary Metal-Oxide-Semiconductor) technology is known for its low power consumption, as it draws significant current only during switching states.", }, { question: "What is the function of a shift register?", options: [ "To add binary numbers", "To store and shift data bits", "To convert parallel data to serial data only", "To count clock pulses", ], correctAnswer: "To store and shift data bits", explanation: "A shift register is a cascade of flip-flops that can store binary data and shift it left or right with each clock pulse, used for data storage, conversion between serial and parallel formats, and certain arithmetic operations.", }, { question: "In digital communication, what does PCM stand for?", options: [ "Phase Control Modulation", "Pulse Code Modulation", "Programmable Control Mechanism", "Power Conservation Mode", ], correctAnswer: "Pulse Code Modulation", explanation: "PCM (Pulse Code Modulation) is a method used to digitally represent sampled analog signals, commonly used in digital audio and telephony systems.", }, ] // Generate a set of quiz questions based on difficulty export const generateQuizQuestions = (difficulty: string) => { // Shuffle the question database const shuffledQuestions = [...questionDatabase].sort(() => Math.random() - 0.5) // Select 10 questions return shuffledQuestions.slice(0, 10) } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }

About

About