[V0_FILE]plaintext:file=".DS_Store" isMerged="true" Bud1 ocblob appIlocblob.�� next-env.d.tsIlocblob�.��next.config.tsIlocblob�.��node_modulesIlocblobg.��package-lock.jsonIlocblob�.��package.jsonIlocblobA��postcss.config.mjsIlocblob��publicIlocblob�� README.mdIlocblob�� tsconfig.jsonIlocblob�� @� @� @� @E DSDB `� @� @� @ [V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). ## Getting Started First, run the development server: \`\`\`bash npm run dev # or yarn dev # or pnpm dev # or bun dev \`\`\` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. [V0_FILE]typescript:file="app/.well-known/farcaster.json/route.ts" isMerged="true" function withValidProperties( properties: Record, ) { return Object.fromEntries( Object.entries(properties).filter(([key, value]) => { if (Array.isArray(value)) { return value.length > 0; } return !!value; }), ); } export async function GET() { const URL = process.env.NEXT_PUBLIC_URL; return Response.json({ accountAssociation: { header: process.env.FARCASTER_HEADER, payload: process.env.FARCASTER_PAYLOAD, signature: process.env.FARCASTER_SIGNATURE, }, "baseBuilder": { "allowedAddresses": ["0x4522FAc5C7aa59cFa7923961C5cF7Ea3bb493978"] }, frame: withValidProperties({ version: "1", name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME, subtitle: process.env.NEXT_PUBLIC_APP_SUBTITLE, description: process.env.NEXT_PUBLIC_APP_DESCRIPTION, screenshotUrls: [], iconUrl: process.env.NEXT_PUBLIC_APP_ICON, splashImageUrl: process.env.NEXT_PUBLIC_APP_SPLASH_IMAGE, splashBackgroundColor: process.env.NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR, homeUrl: URL, webhookUrl: `${URL}/api/webhook`, primaryCategory: process.env.NEXT_PUBLIC_APP_PRIMARY_CATEGORY, tags: [], heroImageUrl: process.env.NEXT_PUBLIC_APP_HERO_IMAGE, tagline: process.env.NEXT_PUBLIC_APP_TAGLINE, ogTitle: process.env.NEXT_PUBLIC_APP_OG_TITLE, ogDescription: process.env.NEXT_PUBLIC_APP_OG_DESCRIPTION, ogImageUrl: process.env.NEXT_PUBLIC_APP_OG_IMAGE, noindex: "true", }), }); } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: #ffffff; --foreground: #171717; } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "../styles/theme.css"; import "../styles/onchainkit-variables.css"; import "../styles/ock.css"; import type { Metadata } from "next"; import { Providers } from "./providers"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { generator: 'v0.app', title: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME || 'MiniKit App', description: "Generated by `create-onchain --mini`, a Next.js template for MiniKit", other: { "fc:frame": JSON.stringify({ version: "next", imageUrl: process.env.NEXT_PUBLIC_APP_HERO_IMAGE, button: { title: `Launch ${process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME || 'MiniKit App'}`, action: { type: "launch_frame", name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME || 'MiniKit App', url: process.env.NEXT_PUBLIC_URL, splashImageUrl: process.env.NEXT_PUBLIC_SPLASH_IMAGE, splashBackgroundColor: process.env.NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR, }, }, }), }, }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client"; import { useMiniKit, useAddFrame, useOpenUrl, } from "@coinbase/onchainkit/minikit"; import { Name, Identity, Address, Avatar, EthBalance, } from "@coinbase/onchainkit/identity"; import { ConnectWallet, Wallet, WalletDropdown, WalletDropdownDisconnect, } from "@coinbase/onchainkit/wallet"; import { BasePay } from "../components/basePay"; import { SendTokenButton } from "../components/sendToken"; import { useEffect, useState, useMemo } from "react"; export default function Home() { const { setFrameReady, isFrameReady, context } = useMiniKit(); const addFrame = useAddFrame(); const [frameAdded, setFrameAdded] = useState(false); const handleAddFrame = async () => { try { await addFrame(); setFrameAdded(true); } catch (error) { console.error("Failed to add frame:", error); } }; useEffect(() => { if (!isFrameReady) { setFrameReady(); } }, [setFrameReady, isFrameReady]); const saveFrameButton = useMemo(() => { if (context && !context.client.added) { return ( ); } if (frameAdded) { return (

✓ Saved

); } return null; }, [context, frameAdded, handleAddFrame]); return (

{/* Header */}

{/* Logo */}

base

{/* Right side - Save button and Wallet */}

{/* Save Frame Button - hidden on mobile, visible on larger screens */}

{saveFrameButton}

{/* Wallet Component */}

{/* Mobile Save Button - shown below header on mobile */}

{saveFrameButton}

{/* Main Content - Centered */}

{/* Footer */}

); } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/basePay.tsx" isMerged="true" "use client"; import { useState } from "react"; import { BasePayButton } from '@base-org/account-ui/react'; import { pay, getPaymentStatus } from '@base-org/account'; interface PayResult { id?: string; transactionId?: string; } interface PaymentStatusResult { status?: string; } interface PaymentState { status: 'idle' | 'processing' | 'completed' | 'pending' | 'failed'; message: string; transactionId?: string; timestamp?: Date; } function PaymentStatusCard({ paymentState, onReset }: { paymentState: PaymentState; onReset: () => void; }) { const getStatusConfig = (status: PaymentState['status']) => { switch (status) { case 'processing': return { icon: '⏳', bgColor: 'bg-blue-50', borderColor: 'border-blue-200', iconColor: 'text-blue-600', titleColor: 'text-blue-900', textColor: 'text-blue-700' }; case 'pending': return { icon: '🔄', bgColor: 'bg-amber-50', borderColor: 'border-amber-200', iconColor: 'text-amber-600', titleColor: 'text-amber-900', textColor: 'text-amber-700' }; case 'completed': return { icon: '🎉', bgColor: 'bg-green-50', borderColor: 'border-green-200', iconColor: 'text-green-600', titleColor: 'text-green-900', textColor: 'text-green-700' }; case 'failed': return { icon: '❌', bgColor: 'bg-red-50', borderColor: 'border-red-200', iconColor: 'text-red-600', titleColor: 'text-red-900', textColor: 'text-red-700' }; default: return { icon: 'ℹ️', bgColor: 'bg-gray-50', borderColor: 'border-gray-200', iconColor: 'text-gray-600', titleColor: 'text-gray-900', textColor: 'text-gray-700' }; } }; const config = getStatusConfig(paymentState.status); const baseScanUrl = 'https://basescan.org/tx/'; return (

{config.icon}

{paymentState.status === 'processing' && 'Processing Payment'} {paymentState.status === 'pending' && 'Payment Pending'} {paymentState.status === 'completed' && 'Payment Successful'} {paymentState.status === 'failed' && 'Payment Failed'}

{paymentState.message}

{paymentState.transactionId && paymentState.transactionId !== 'unknown' && (

Transaction ID: {`${paymentState.transactionId.slice(0, 6)}...${paymentState.transactionId.slice(-6)}`}

)} {paymentState.timestamp && (

{paymentState.timestamp.toLocaleTimeString()} {paymentState.status === 'pending' && ( Checking status... )}

)} {paymentState.status === 'completed' && (

✨ Payment confirmed on Base network. USDC transferred successfully!

)} {(paymentState.status === 'completed' || paymentState.status === 'failed') && ( )}

); } export function BasePay() { const [isProcessing, setIsProcessing] = useState(false); const [paymentState, setPaymentState] = useState({ status: 'idle', message: '' }); const [amount, setAmount] = useState("5.00"); // sohey.eth const recipient = "0xa41f6558A517e6aC35DeA5A453273Aa4F31CDAcD"; const handlePay = async () => { try { setIsProcessing(true); setPaymentState({ status: 'processing', message: 'Initiating USDC payment on Base...', timestamp: new Date() }); const result = await pay({ amount: amount, to: recipient, testnet: false }); const payResult = result as PayResult; console.log('pay result', payResult); const transactionId = payResult?.id || payResult?.transactionId || 'unknown'; setPaymentState({ status: 'pending', message: 'Payment submitted to Base network. Waiting for confirmation...', transactionId, timestamp: new Date() }); const checkStatus = async () => { try { const statusResult = await getPaymentStatus({ id: transactionId, testnet: false }); const statusResponse = statusResult as PaymentStatusResult; const status = statusResponse?.status || 'unknown'; if (status === 'completed') { setPaymentState({ status: 'completed', message: 'Payment successful! USDC has been transferred on Base.', transactionId, timestamp: new Date() }); } else if (status === 'pending') { setPaymentState({ status: 'pending', message: 'Payment is being processed on the Base network...', transactionId, timestamp: new Date() }); setTimeout(checkStatus, 2000); } else if (status === 'failed') { setPaymentState({ status: 'failed', message: 'Payment failed. The transaction was not completed.', transactionId, timestamp: new Date() }); } } catch (statusError) { console.error("Status check error:", statusError); setPaymentState({ status: 'failed', message: 'Unable to verify payment status. Please check the transaction manually.', transactionId, timestamp: new Date() }); } }; setTimeout(checkStatus, 1000); } catch (error) { console.error("Payment error:", error); setPaymentState({ status: 'failed', message: `Payment failed: ${error instanceof Error ? error.message : 'Unknown error occurred'}`, timestamp: new Date() }); } finally { setIsProcessing(false); } }; return (

💳

Base Pay

One-tap USDC payments on Base

Fast • Low fees • Fully-backed digital dollars

Payment Amount (USD)

$ setAmount(e.target.value)} step="0.01" min="0.01" className="w-full pl-8 pr-3 py-2 border border-input bg-background rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" placeholder="5.00" disabled={isProcessing} />

Payment will be made in USDC on Base network

Payment Recipient

{recipient}

sohey.base.eth

{isProcessing ? 'Processing payment...' : 'Click to pay with Base Account'}

{paymentState.status !== 'idle' && ( setPaymentState({ status: 'idle', message: '' })} /> )}

); } [V0_FILE]typescriptreact:file="components/sendToken.tsx" isMerged="true" "use client"; import { useState } from "react"; import { sdk } from '@farcaster/miniapp-sdk'; export function SendTokenButton() { const [isProcessing, setIsProcessing] = useState(false); const handleSendToken = async () => { try { setIsProcessing(true); await sdk.actions.sendToken({ //add token address you wish to recieve token: "eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", amount: "1", // add your fid is this for tipping recipientFid: 20390, }); } catch (error) { console.error("Send token error:", error); } finally { setIsProcessing(false); } }; return ( ); } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescript:file="next.config.ts" isMerged="true" import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ }; export default nextConfig; [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@base-org/account": "latest", "@base-org/account-ui": "latest", "@coinbase/onchainkit": "latest", "@farcaster/miniapp-sdk": "latest", "@farcaster/miniapp-wagmi-connector": "latest", "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@tanstack/react-query": "latest", "@wagmi/core": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "latest", "pino-pretty": "^13.1.1", "postcss": "^8.5", "preact": "latest", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "svelte": "latest", "tailwind-merge": "^2.5.5", "tailwindcss": "^3.4.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "viem": "latest", "vue": "latest", "wagmi": "latest", "zod": "3.25.67" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; export default config; [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]css:file="styles/ock.css" isMerged="true" /* You can also create your own --ock-font-family variable */ /* Font */ .ock-font-family { font-family: var(--ock-font-family); } /* Border */ .ock-border-default { border-color: var(--ock-bg-default); } .ock-border-default-active { border-color: var(--ock-bg-default-active); } .ock-border-line-primary { border-color: var(--ock-line-primary); } .ock-border-line-default { border-color: var(--ock-line-default); } .ock-border-line-heavy { border-color: var(--ock-line-heavy); } .ock-border-line-inverse { border-color: var(--ock-line-inverse); } .ock-border-radius { border-radius: var(--ock-border-radius); } .ock-border-radius-inner { border-radius: var(--ock-border-radius-inner); } /* Fill */ .ock-fill-default { fill: var(--ock-bg-default); } .ock-fill-default-reverse { fill: var(--ock-bg-default-reverse); } .ock-fill-alternate { fill: var(--ock-bg-alternate); } /* Icon */ .ock-icon-color-primary { fill: var(--ock-icon-color-primary); } .ock-icon-color-foreground { fill: var(--ock-icon-color-foreground); } .ock-icon-color-foreground-muted { fill: var(--ock-icon-color-foreground-muted); } .ock-icon-color-inverse { fill: var(--ock-icon-color-inverse); } .ock-icon-color-error { fill: var(--ock-icon-color-error); } .ock-icon-color-success { fill: var(--ock-icon-color-success); } .ock-icon-color-warning { fill: var(--ock-icon-color-warning); } /* Placeholder */ .placeholder-ock-default::-moz-placeholder { color: var(--ock-text-foreground-muted); } .placeholder-ock-default::placeholder { color: var(--ock-text-foreground-muted); } /* Scrollbar */ .ock-scrollbar { scrollbar-width: thin; scrollbar-color: #d1d5db #ffffff; } /* Shadow */ .ock-shadow-default { box-shadow: 0px 8px 12px 0px #5b616e1f; } .dark .ock-shadow-default { box-shadow: 0px 8px 12px 0px #5b616e1f; } /* Text */ .ock-text-inverse { color: var(--ock-text-inverse); } .ock-text-foreground { color: var(--ock-text-foreground); } .ock-text-foreground-muted { color: var(--ock-text-foreground-muted); } .ock-text-error { color: var(--ock-text-error); } .ock-text-primary { color: var(--ock-text-primary); } .ock-text-success { color: var(--ock-text-success); } .ock-text-warning { color: var(--ock-text-warning); } .ock-text-disabled { color: var(--ock-text-disabled); } /* Background */ .ock-bg-default { background-color: var(--ock-bg-default); } .ock-bg-default-hover { background-color: var(--ock-bg-default-hover); } .ock-bg-default-active { background-color: var(--ock-bg-default-active); } .ock-bg-alternate { background-color: var(--ock-bg-alternate); } .ock-bg-alternate-hover { background-color: var(--ock-bg-alternate-hover); } .ock-bg-alternate-active { background-color: var(--ock-bg-alternate-active); } .ock-bg-inverse { background-color: var(--ock-bg-inverse); } .ock-bg-inverse-hover { background-color: var(--ock-bg-inverse-hover); } .ock-bg-inverse-active { background-color: var(--ock-bg-inverse-active); } .ock-bg-primary { background-color: var(--ock-bg-primary); } .ock-bg-primary-hover { background-color: var(--ock-bg-primary-hover); } .ock-bg-primary-active { background-color: var(--ock-bg-primary-active); } .ock-bg-secondary { background-color: var(--ock-bg-secondary); } .ock-bg-secondary-hover { background-color: var(--ock-bg-secondary-hover); } .ock-bg-secondary-active { background-color: var(--ock-bg-secondary-active); } .ock-bg-error { background-color: var(--ock-bg-error); } .ock-bg-warning { background-color: var(--ock-bg-warning); } .ock-bg-success { background-color: var(--ock-bg-success); } .ock-bg-default-reverse { background-color: var(--ock-bg-default-reverse); } .ock-bg-primary-washed { background-color: var(--ock-bg-primary-washed); } .ock-bg-primary-disabled { background-color: var(--ock-bg-primary-disabled); } *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: Inter, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } :root, .light, .default-light { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: #f9fafb; --ock-text-foreground: #030712; --ock-text-foreground-muted: #4b5563; --ock-text-error: #e11d48; --ock-text-primary: #4f46e5; --ock-text-success: #65a30d; --ock-text-warning: #ea580c; --ock-text-disabled: #9ca3af; --ock-bg-default: #f9fafb; --ock-bg-default-hover: #e5e7eb; --ock-bg-default-active: #d1d5db; --ock-bg-alternate: #e5e7eb; --ock-bg-alternate-hover: #d1d5db; --ock-bg-alternate-active: #9ca3af; --ock-bg-inverse: #f3f4f6; --ock-bg-inverse-hover: #e5e7eb; --ock-bg-inverse-active: #d1d5db; --ock-bg-primary: #4f46e5; --ock-bg-primary-hover: #4338ca; --ock-bg-primary-active: #3730a3; --ock-bg-primary-washed: #e0e7ff; --ock-bg-primary-disabled: #a5b4fc; --ock-bg-secondary: #e2e8f0; --ock-bg-secondary-hover: #cbd5e1; --ock-bg-secondary-active: #94a3b8; --ock-bg-error: #e11d48; --ock-bg-warning: #ea580c; --ock-bg-success: #bef264; --ock-bg-default-reverse: #030712; --ock-icon-color-primary: #4f46e5; --ock-icon-color-foreground: #030712; --ock-icon-color-foreground-muted: #4b5563; --ock-icon-color-inverse: #f9fafb; --ock-icon-color-error: #e11d48; --ock-icon-color-success: #65a30d; --ock-icon-color-warning: #ea580c; --ock-line-primary: #4f46e5; --ock-line-default: #d1d5db; --ock-line-heavy: #6b7280; --ock-line-inverse: #374151; } .dark, .default-dark { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: #030712; --ock-text-foreground: #f9fafb; --ock-text-foreground-muted: #9ca3af; --ock-text-error: #fb7185; --ock-text-primary: #818cf8; --ock-text-success: #a3e635; --ock-text-warning: #fb923c; --ock-text-disabled: #4b5563; --ock-bg-default: #030712; --ock-bg-default-hover: #1f2937; --ock-bg-default-active: #374151; --ock-bg-alternate: #1f2937; --ock-bg-alternate-hover: #374151; --ock-bg-alternate-active: #4b5563; --ock-bg-inverse: #111827; --ock-bg-inverse-hover: #1f2937; --ock-bg-inverse-active: #374151; --ock-bg-primary: #818cf8; --ock-bg-primary-hover: #a5b4fc; --ock-bg-primary-active: #c7d2fe; --ock-bg-primary-washed: #312e81; --ock-bg-primary-disabled: #1e1b4b; --ock-bg-secondary: #1e293b; --ock-bg-secondary-hover: #334155; --ock-bg-secondary-active: #475569; --ock-bg-error: #fb7185; --ock-bg-warning: #fb923c; --ock-bg-success: #4d7c0f; --ock-bg-default-reverse: #f9fafb; --ock-icon-color-primary: #818cf8; --ock-icon-color-foreground: #f9fafb; --ock-icon-color-foreground-muted: #9ca3af; --ock-icon-color-inverse: #030712; --ock-icon-color-error: #fb7185; --ock-icon-color-success: #a3e635; --ock-icon-color-warning: #fb923c; --ock-line-primary: #818cf8; --ock-line-default: #374151; --ock-line-heavy: #6b7280; --ock-line-inverse: #d1d5db; } .base-light { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: #f9fafb; --ock-text-foreground: #030712; --ock-text-foreground-muted: #4b5563; --ock-text-error: #e11d48; --ock-text-primary: #0052ff; --ock-text-success: #65a30d; --ock-text-warning: #ea580c; --ock-text-disabled: #9ca3af; --ock-bg-default: #f9fafb; --ock-bg-default-hover: #e5e7eb; --ock-bg-default-active: #d1d5db; --ock-bg-alternate: #e5e7eb; --ock-bg-alternate-hover: #d1d5db; --ock-bg-alternate-active: #9ca3af; --ock-bg-inverse: #f3f4f6; --ock-bg-inverse-hover: #e5e7eb; --ock-bg-inverse-active: #d1d5db; --ock-bg-primary: #0052ff; --ock-bg-primary-hover: #014ceb; --ock-bg-primary-active: #0148dc; --ock-bg-primary-washed: #b2cbff; --ock-bg-primary-disabled: #9dbcfe; --ock-bg-secondary: #e2e8f0; --ock-bg-secondary-hover: #cbd5e1; --ock-bg-secondary-active: #94a3b8; --ock-bg-error: #e11d48; --ock-bg-warning: #ea580c; --ock-bg-success: #bef264; --ock-bg-default-reverse: #030712; --ock-icon-color-primary: #0052ff; --ock-icon-color-foreground: #030712; --ock-icon-color-foreground-muted: #4b5563; --ock-icon-color-inverse: #f9fafb; --ock-icon-color-error: #e11d48; --ock-icon-color-success: #65a30d; --ock-icon-color-warning: #ea580c; --ock-line-primary: #0052ff; --ock-line-default: #d1d5db; --ock-line-heavy: #6b7280; --ock-line-inverse: #374151; } .base-dark { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: #f9fafb; --ock-text-foreground: #f9fafb; --ock-text-foreground-muted: #9ca3af; --ock-text-error: #fb7185; --ock-text-primary: #578bfa; --ock-text-success: #a3e635; --ock-text-warning: #fb923c; --ock-text-disabled: #4b5563; --ock-bg-default: #030712; --ock-bg-default-hover: #1f2937; --ock-bg-default-active: #374151; --ock-bg-alternate: #1f2937; --ock-bg-alternate-hover: #374151; --ock-bg-alternate-active: #4b5563; --ock-bg-inverse: #111827; --ock-bg-inverse-hover: #1f2937; --ock-bg-inverse-active: #374151; --ock-bg-primary: #578bfa; --ock-bg-primary-hover: #477ef5; --ock-bg-primary-active: #5386f5; --ock-bg-primary-washed: #051537; --ock-bg-primary-disabled: #1b3365; --ock-bg-secondary: #1e293b; --ock-bg-secondary-hover: #334155; --ock-bg-secondary-active: #475569; --ock-bg-error: #fb7185; --ock-bg-warning: #fb923c; --ock-bg-success: #4d7c0f; --ock-bg-default-reverse: #f9fafb; --ock-icon-color-primary: #578bfa; --ock-icon-color-foreground: #f9fafb; --ock-icon-color-foreground-muted: #9ca3af; --ock-icon-color-inverse: #030712; --ock-icon-color-error: #fb7185; --ock-icon-color-success: #a3e635; --ock-icon-color-warning: #fb923c; --ock-line-primary: #578bfa; --ock-line-default: #374151; --ock-line-heavy: #6b7280; --ock-line-inverse: #d1d5db; } .cyberpunk { --ock-font-family: 'Oxanium', sans-serif; --ock-border-radius: 0.125rem; --ock-border-radius-inner: 0rem; --ock-text-inverse: #030712; --ock-text-foreground: #f9fafb; --ock-text-foreground-muted: #9ca3af; --ock-text-error: #fb7185; --ock-text-primary: #e879f9; --ock-text-success: #a3e635; --ock-text-warning: #fb923c; --ock-text-disabled: #4b5563; --ock-bg-default: #030712; --ock-bg-default-hover: #1f2937; --ock-bg-default-active: #374151; --ock-bg-alternate: #1f2937; --ock-bg-alternate-hover: #374151; --ock-bg-alternate-active: #4b5563; --ock-bg-inverse: #111827; --ock-bg-inverse-hover: #1f2937; --ock-bg-inverse-active: #374151; --ock-bg-primary: #e879f9; --ock-bg-primary-hover: #f0abfc; --ock-bg-primary-active: #f5d0fe; --ock-bg-primary-washed: #701a75; --ock-bg-primary-disabled: #4a044e; --ock-bg-secondary: #1e293b; --ock-bg-secondary-hover: #334155; --ock-bg-secondary-active: #475569; --ock-bg-error: #fb7185; --ock-bg-warning: #fb923c; --ock-bg-success: #a3e635; --ock-bg-default-reverse: #f9fafb; --ock-icon-color-primary: #e879f9; --ock-icon-color-foreground: #f9fafb; --ock-icon-color-foreground-muted: #4b5563; --ock-icon-color-inverse: #030712; --ock-icon-color-error: #e11d48; --ock-icon-color-success: #65a30d; --ock-icon-color-warning: #ea580c; --ock-line-primary: #e879f9; --ock-line-default: #374151; --ock-line-heavy: #6b7280; --ock-line-inverse: #d1d5db; } .hacker { --ock-font-family: 'Noto Sans Mono', sans-serif; --ock-border-radius: 0.375rem; --ock-border-radius-inner: 0.125rem; --ock-text-inverse: #fafafa; --ock-text-foreground: #09090b; --ock-text-foreground-muted: #52525b; --ock-text-error: #e11d48; --ock-text-primary: #09090b; --ock-text-success: #65a30d; --ock-text-warning: #ea580c; --ock-text-disabled: #a1a1aa; --ock-bg-default: #fafafa; --ock-bg-default-hover: #e4e4e7; --ock-bg-default-active: #d4d4d8; --ock-bg-alternate: #e4e4e7; --ock-bg-alternate-hover: #d4d4d8; --ock-bg-alternate-active: #a1a1aa; --ock-bg-inverse: #f4f4f5; --ock-bg-inverse-hover: #e4e4e7; --ock-bg-inverse-active: #d4d4d8; --ock-bg-primary: #09090b; --ock-bg-primary-hover: #27272a; --ock-bg-primary-active: #3f3f46; --ock-bg-primary-washed: #f4f4f5; --ock-bg-primary-disabled: #d4d4d8; --ock-bg-secondary: #e5e5e5; --ock-bg-secondary-hover: #d4d4d4; --ock-bg-secondary-active: #a3a3a3; --ock-bg-error: #e11d48; --ock-bg-warning: #ea580c; --ock-bg-success: #65a30d; --ock-bg-default-reverse: #fafafa; --ock-icon-color-primary: #09090b; --ock-icon-color-foreground: #09090b; --ock-icon-color-foreground-muted: #52525b; --ock-icon-color-inverse: #fafafa; --ock-icon-color-error: #e11d48; --ock-icon-color-success: #65a30d; --ock-icon-color-warning: #ea580c; --ock-line-primary: #09090b; --ock-line-default: #d4d4d8; --ock-line-heavy: #71717a; --ock-line-inverse: #3f3f46; } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none{ pointer-events: none; } .pointer-events-auto{ pointer-events: auto; } .visible{ visibility: visible; } .static{ position: static; } .fixed{ position: fixed; } .absolute{ position: absolute; } .relative{ position: relative; } .inset-0{ inset: 0px; } .inset-x-0{ left: 0px; right: 0px; } .-bottom-0\.5{ bottom: -0.125rem; } .-bottom-\[12\.875rem\]{ bottom: -12.875rem; } .-right-0\.5{ right: -0.125rem; } .bottom-0{ bottom: 0px; } .bottom-4{ bottom: 1rem; } .bottom-5{ bottom: 1.25rem; } .bottom-full{ bottom: 100%; } .left-0{ left: 0px; } .left-1\/2{ left: 50%; } .left-2\/4{ left: 50%; } .left-3\/4{ left: 75%; } .left-4{ left: 1rem; } .left-\[-99999px\]{ left: -99999px; } .left-\[0\%\]{ left: 0%; } .right-0{ right: 0px; } .right-2{ right: 0.5rem; } .right-4{ right: 1rem; } .top-0{ top: 0px; } .top-1\/2{ top: 50%; } .top-4{ top: 1rem; } .top-6{ top: 1.5rem; } .top-\[100px\]{ top: 100px; } .top-full{ top: 100%; } .z-0{ z-index: 0; } .z-10{ z-index: 10; } .z-20{ z-index: 20; } .z-40{ z-index: 40; } .z-50{ z-index: 50; } .m-0{ margin: 0px; } .-my-1{ margin-top: -0.25rem; margin-bottom: -0.25rem; } .-my-6{ margin-top: -1.5rem; margin-bottom: -1.5rem; } .mx-auto{ margin-left: auto; margin-right: auto; } .my-0\.5{ margin-top: 0.125rem; margin-bottom: 0.125rem; } .my-1\.5{ margin-top: 0.375rem; margin-bottom: 0.375rem; } .my-2{ margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-3{ margin-top: 0.75rem; margin-bottom: 0.75rem; } .-mr-0\.5{ margin-right: -0.125rem; } .-mr-px{ margin-right: -1px; } .-mt-4{ margin-top: -1rem; } .mb-1{ margin-bottom: 0.25rem; } .mb-2{ margin-bottom: 0.5rem; } .mb-4{ margin-bottom: 1rem; } .mb-6{ margin-bottom: 1.5rem; } .ml-1{ margin-left: 0.25rem; } .ml-2{ margin-left: 0.5rem; } .ml-6{ margin-left: 1.5rem; } .ml-px{ margin-left: 1px; } .mr-1{ margin-right: 0.25rem; } .mr-10{ margin-right: 2.5rem; } .mr-2{ margin-right: 0.5rem; } .mt-0\.5{ margin-top: 0.125rem; } .mt-1{ margin-top: 0.25rem; } .mt-16{ margin-top: 4rem; } .mt-2{ margin-top: 0.5rem; } .mt-3{ margin-top: 0.75rem; } .mt-4{ margin-top: 1rem; } .mt-\[60\%\]{ margin-top: 60%; } .box-border{ box-sizing: border-box; } .block{ display: block; } .flex{ display: flex; } .inline-flex{ display: inline-flex; } .grid{ display: grid; } .contents{ display: contents; } .hidden{ display: none; } .aspect-square{ aspect-ratio: 1 / 1; } .size-3{ width: 0.75rem; height: 0.75rem; } .h-1{ height: 0.25rem; } .h-10{ height: 2.5rem; } .h-11{ height: 2.75rem; } .h-12{ height: 3rem; } .h-120{ height: 30rem; } .h-14{ height: 3.5rem; } .h-16{ height: 4rem; } .h-2\.5{ height: 0.625rem; } .h-20{ height: 5rem; } .h-24{ height: 6rem; } .h-28{ height: 7rem; } .h-3{ height: 0.75rem; } .h-4{ height: 1rem; } .h-44{ height: 11rem; } .h-5{ height: 1.25rem; } .h-6{ height: 1.5rem; } .h-7{ height: 1.75rem; } .h-8{ height: 2rem; } .h-9{ height: 2.25rem; } .h-\[1\.125rem\]{ height: 1.125rem; } .h-\[1\.625rem\]{ height: 1.625rem; } .h-\[12\.875rem\]{ height: 12.875rem; } .h-\[148px\]{ height: 148px; } .h-\[15px\]{ height: 15px; } .h-\[18px\]{ height: 18px; } .h-\[34px\]{ height: 34px; } .h-\[42px\]{ height: 42px; } .h-\[80px\]{ height: 80px; } .h-auto{ height: auto; } .h-full{ height: 100%; } .max-h-120{ max-height: 30rem; } .max-h-44{ max-height: 11rem; } .max-h-80{ max-height: 20rem; } .min-h-60{ min-height: 15rem; } .min-h-full{ min-height: 100%; } .w-1\/2{ width: 50%; } .w-10{ width: 2.5rem; } .w-11{ width: 2.75rem; } .w-12{ width: 3rem; } .w-14{ width: 3.5rem; } .w-16{ width: 4rem; } .w-2\.5{ width: 0.625rem; } .w-20{ width: 5rem; } .w-24{ width: 6rem; } .w-28{ width: 7rem; } .w-3{ width: 0.75rem; } .w-4{ width: 1rem; } .w-5{ width: 1.25rem; } .w-6{ width: 1.5rem; } .w-7{ width: 1.75rem; } .w-8{ width: 2rem; } .w-80{ width: 20rem; } .w-88{ width: 22rem; } .w-9{ width: 2.25rem; } .w-\[1\.125rem\]{ width: 1.125rem; } .w-\[15px\]{ width: 15px; } .w-\[200px\]{ width: 200px; } .w-\[21\.75rem\]{ width: 21.75rem; } .w-\[22rem\]{ width: 22rem; } .w-\[375px\]{ width: 375px; } .w-\[42px\]{ width: 42px; } .w-\[475px\]{ width: 475px; } .w-auto{ width: auto; } .w-fit{ width: -moz-fit-content; width: fit-content; } .w-full{ width: 100%; } .min-w-0{ min-width: 0px; } .min-w-14{ min-width: 3.5rem; } .min-w-24{ min-width: 6rem; } .min-w-28{ min-width: 7rem; } .min-w-40{ min-width: 10rem; } .min-w-52{ min-width: 13rem; } .min-w-80{ min-width: 20rem; } .min-w-\[153px\]{ min-width: 153px; } .min-w-\[300px\]{ min-width: 300px; } .min-w-\[70px\]{ min-width: 70px; } .min-w-full{ min-width: 100%; } .max-w-24{ max-width: 6rem; } .max-w-52{ max-width: 13rem; } .max-w-\[180px\]{ max-width: 180px; } .max-w-\[500px\]{ max-width: 500px; } .max-w-fit{ max-width: -moz-fit-content; max-width: fit-content; } .max-w-full{ max-width: 100%; } .flex-1{ flex: 1 1 0%; } .flex-shrink-0{ flex-shrink: 0; } .shrink-0{ flex-shrink: 0; } .flex-grow{ flex-grow: 1; } .grow{ flex-grow: 1; } .-translate-x-1\/2{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-2\/4{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\/2{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[100\%\]{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-0{ --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[-100\%\]{ --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[102\%\]{ --tw-translate-y: 102%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-full{ --tw-translate-y: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-90{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-110{ --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes pulse{ 50%{ opacity: .5; } } .animate-pulse{ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } .animate-spin{ animation: spin 1s linear infinite; } .cursor-default{ cursor: default; } .cursor-grab{ cursor: grab; } .cursor-not-allowed{ cursor: not-allowed; } .cursor-pointer{ cursor: pointer; } .cursor-text{ cursor: text; } .touch-none{ touch-action: none; } .select-none{ -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize{ resize: both; } .grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-\[2\.5rem_1fr_auto\]{ grid-template-columns: 2.5rem 1fr auto; } .flex-row{ flex-direction: row; } .flex-col{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .content-center{ align-content: center; } .items-start{ align-items: flex-start; } .items-end{ align-items: flex-end; } .items-center{ align-items: center; } .items-stretch{ align-items: stretch; } .justify-start{ justify-content: flex-start; } .justify-end{ justify-content: flex-end; } .justify-center{ justify-content: center; } .justify-between{ justify-content: space-between; } .gap-1{ gap: 0.25rem; } .gap-1\.5{ gap: 0.375rem; } .gap-16{ gap: 4rem; } .gap-2{ gap: 0.5rem; } .gap-3{ gap: 0.75rem; } .gap-4{ gap: 1rem; } .gap-8{ gap: 2rem; } .space-x-0 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0px * var(--tw-space-x-reverse)); margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse))); } .space-x-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } .space-x-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .space-x-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } .space-x-\[-\.8rem\] > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(-.8rem * var(--tw-space-x-reverse)); margin-left: calc(-.8rem * calc(1 - var(--tw-space-x-reverse))); } .justify-self-start{ justify-self: start; } .justify-self-end{ justify-self: end; } .justify-self-center{ justify-self: center; } .overflow-hidden{ overflow: hidden; } .overflow-y-auto{ overflow-y: auto; } .overflow-y-hidden{ overflow-y: hidden; } .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis{ text-overflow: ellipsis; } .whitespace-nowrap{ white-space: nowrap; } .text-nowrap{ text-wrap: nowrap; } .\!rounded-full{ border-radius: 9999px !important; } .rounded{ border-radius: 0.25rem; } .rounded-3xl{ border-radius: 1.5rem; } .rounded-\[0\.43931rem\]{ border-radius: 0.43931rem; } .rounded-\[20px_20px_0_0\]{ border-radius: 20px 20px 0 0; } .rounded-\[50\%\]{ border-radius: 50%; } .rounded-\[6\.25rem\]{ border-radius: 6.25rem; } .rounded-full{ border-radius: 9999px; } .rounded-lg{ border-radius: 0.5rem; } .rounded-md{ border-radius: 0.375rem; } .rounded-xl{ border-radius: 0.75rem; } .rounded-t-3xl{ border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; } .rounded-t-lg{ border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .rounded-tl-\[calc$var\(--ock-border-radius$_-_1px\)\]{ border-top-left-radius: calc(var(--ock-border-radius) - 1px); } .rounded-tr-\[calc$var\(--ock-border-radius$_-_1px\)\]{ border-top-right-radius: calc(var(--ock-border-radius) - 1px); } .border{ border-width: 1px; } .border-2{ border-width: 2px; } .border-4{ border-width: 4px; } .border-\[0\.5px\]{ border-width: 0.5px; } .border-\[length\:0_0_0_16px\]{ border-width: 0 0 0 16px; } .border-\[length\:9px_0_9px_16px\]{ border-width: 9px 0 9px 16px; } .\!border-b-0{ border-bottom-width: 0px !important; } .\!border-l-0{ border-left-width: 0px !important; } .\!border-r-0{ border-right-width: 0px !important; } .border-t{ border-top-width: 1px; } .border-solid{ border-style: solid; } .border-double{ border-style: double; } .border-none{ border-style: none; } .border-\[none\]{ border-color: none; } .border-\[var$--ock-bg-default-reverse$\]{ border-color: var(--ock-bg-default-reverse); } .border-gray-200{ --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .border-transparent{ border-color: transparent; } .\!border-t-\[var$--ock-bg-primary$\]{ border-top-color: var(--ock-bg-primary) !important; } .border-l-\[var$--ock-bg-default$\]{ border-left-color: var(--ock-bg-default); } .border-t-gray-400{ --tw-border-opacity: 1; border-top-color: rgb(156 163 175 / var(--tw-border-opacity, 1)); } .\!bg-\[var$--ock-bg-alternate-active$\]{ background-color: var(--ock-bg-alternate-active) !important; } .\!bg-inherit{ background-color: inherit !important; } .bg-\[\#0052FF\]{ --tw-bg-opacity: 1; background-color: rgb(0 82 255 / var(--tw-bg-opacity, 1)); } .bg-\[\#E0E7FF\]{ --tw-bg-opacity: 1; background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1)); } .bg-black{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .bg-black\/50{ background-color: rgb(0 0 0 / 0.5); } .bg-gray-200{ --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-transparent{ background-color: transparent; } .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-opacity-20{ --tw-bg-opacity: 0.2; } .bg-opacity-50{ --tw-bg-opacity: 0.5; } .object-cover{ -o-object-fit: cover; object-fit: cover; } .p-0{ padding: 0px; } .p-0\.5{ padding: 0.125rem; } .p-1{ padding: 0.25rem; } .p-2{ padding: 0.5rem; } .p-3{ padding: 0.75rem; } .p-4{ padding: 1rem; } .p-6{ padding: 1.5rem; } .px-0{ padding-left: 0px; padding-right: 0px; } .px-1{ padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5{ padding-left: 0.375rem; padding-right: 0.375rem; } .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; } .px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .px-4{ padding-left: 1rem; padding-right: 1rem; } .px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .py-0{ padding-top: 0px; padding-bottom: 0px; } .py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4{ padding-top: 1rem; padding-bottom: 1rem; } .pb-2{ padding-bottom: 0.5rem; } .pb-3{ padding-bottom: 0.75rem; } .pb-4{ padding-bottom: 1rem; } .pl-1{ padding-left: 0.25rem; } .pl-12{ padding-left: 3rem; } .pl-4{ padding-left: 1rem; } .pl-6{ padding-left: 1.5rem; } .pr-3{ padding-right: 0.75rem; } .pr-5{ padding-right: 1.25rem; } .pt-2{ padding-top: 0.5rem; } .pt-2\.5{ padding-top: 0.625rem; } .pt-3{ padding-top: 0.75rem; } .pt-6{ padding-top: 1.5rem; } .pt-8{ padding-top: 2rem; } .text-left{ text-align: left; } .text-center{ text-align: center; } .text-right{ text-align: right; } .font-display{ font-family: DM Sans, sans-serif; } .text-2xl{ font-size: 1.5rem; line-height: 2rem; } .text-5xl{ font-size: 3rem; line-height: 1; } .text-6xl{ font-size: 3.75rem; line-height: 1; } .text-\[0\.6875rem\]{ font-size: 0.6875rem; } .text-\[10px\]{ font-size: 10px; } .text-\[2\.5rem\]{ font-size: 2.5rem; } .text-base{ font-size: 1rem; line-height: 1.5rem; } .text-lg{ font-size: 1.125rem; line-height: 1.75rem; } .text-sm{ font-size: 0.875rem; line-height: 1.25rem; } .text-xl{ font-size: 1.25rem; line-height: 1.75rem; } .text-xs{ font-size: 0.75rem; line-height: 1rem; } .font-bold{ font-weight: 700; } .font-medium{ font-weight: 500; } .font-normal{ font-weight: 400; } .font-semibold{ font-weight: 600; } .uppercase{ text-transform: uppercase; } .leading-6{ line-height: 1.5rem; } .leading-\[13px\]{ line-height: 13px; } .leading-none{ line-height: 1; } .\!text-\[var$--ock-text-foreground$\]{ color: var(--ock-text-foreground) !important; } .\!text-white{ --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important; } .text-\[\#4F46E5\]{ --tw-text-opacity: 1; color: rgb(79 70 229 / var(--tw-text-opacity, 1)); } .text-\[\#8A919E\]{ --tw-text-opacity: 1; color: rgb(138 145 158 / var(--tw-text-opacity, 1)); } .text-black{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .text-gray-50{ --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity, 1)); } .text-red-500{ --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .opacity-0{ opacity: 0; } .opacity-100{ opacity: 1; } .opacity-50{ opacity: 0.5; } .opacity-\[0\.38\]{ opacity: 0.38; } .shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0px_8px_24px_0px_rgba$0\2c 0\2c 0\2c 0\.12$\]{ --tw-shadow: 0px 8px 24px 0px rgba(0,0,0,0.12); --tw-shadow-colored: 0px 8px 24px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-none{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none{ outline: 2px solid transparent; outline-offset: 2px; } .blur{ --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition-\[bottom\]{ transition-property: bottom; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-150{ transition-duration: 150ms; } .duration-200{ transition-duration: 200ms; } .duration-300{ transition-duration: 300ms; } .duration-500{ transition-duration: 500ms; } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .will-change-\[border-width\]{ will-change: border-width; } @keyframes enter{ from{ opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit{ to{ opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } .animate-in{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .animate-out{ animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .fade-in{ --tw-enter-opacity: 0; } .fade-out{ --tw-exit-opacity: 0; } .zoom-in-95{ --tw-enter-scale: .95; } .slide-in-from-bottom-1\.5{ --tw-enter-translate-y: 0.375rem; } .slide-in-from-bottom-1\/2{ --tw-enter-translate-y: 50%; } .slide-in-from-bottom-2\.5{ --tw-enter-translate-y: 0.625rem; } .slide-in-from-left-5{ --tw-enter-translate-x: -1.25rem; } .slide-in-from-right-5{ --tw-enter-translate-x: 1.25rem; } .slide-in-from-top-1\.5{ --tw-enter-translate-y: -0.375rem; } .slide-in-from-top-2\.5{ --tw-enter-translate-y: -0.625rem; } .slide-out-to-bottom-1\.5{ --tw-exit-translate-y: 0.375rem; } .slide-out-to-left-5{ --tw-exit-translate-x: -1.25rem; } .slide-out-to-right-5{ --tw-exit-translate-x: 1.25rem; } .slide-out-to-top-1\.5{ --tw-exit-translate-y: -0.375rem; } .duration-150{ animation-duration: 150ms; } .duration-200{ animation-duration: 200ms; } .duration-300{ animation-duration: 300ms; } .duration-500{ animation-duration: 500ms; } .ease-in-out{ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out{ animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .running{ animation-play-state: running; } .paused{ animation-play-state: paused; } .fill-mode-forwards{ animation-fill-mode: forwards; } /* Chrome, Safari and Opera */ .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-hidden { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .\[appearance\:textfield\]{ -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .\!container{ width: 100% !important; } .container{ width: 100%; } @media (min-width: 640px){ .\!container{ max-width: 640px !important; } .container{ max-width: 640px; } } @media (min-width: 768px){ .\!container{ max-width: 768px !important; } .container{ max-width: 768px; } } @media (min-width: 1024px){ .\!container{ max-width: 1024px !important; } .container{ max-width: 1024px; } } @media (min-width: 1280px){ .\!container{ max-width: 1280px !important; } .container{ max-width: 1280px; } } @media (min-width: 1536px){ .\!container{ max-width: 1536px !important; } .container{ max-width: 1536px; } } .animate-enterRight{ transition-duration: 500ms; animation-name: enter; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; --tw-enter-opacity: 0; --tw-enter-translate-x: 2rem; animation-duration: 500ms; } .animate-enterUp{ transition-duration: 500ms; animation-name: enter; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; --tw-enter-opacity: 0; --tw-enter-translate-y: 2rem; animation-duration: 500ms; } .animate-enterDown{ transition-duration: 500ms; animation-name: enter; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; --tw-enter-opacity: 0; --tw-enter-translate-y: -2rem; animation-duration: 500ms; } .hover\:border-\[--ock-line-primary\]:hover{ border-color: var(--ock-line-primary); } .hover\:bg-\[\#0045D8\]:hover{ --tw-bg-opacity: 1; background-color: rgb(0 69 216 / var(--tw-bg-opacity, 1)); } .hover\:bg-\[var$--ock-bg-alternate-hover$\]:hover{ background-color: var(--ock-bg-alternate-hover); } .hover\:bg-\[var$--ock-bg-default-hover$\]:hover{ background-color: var(--ock-bg-default-hover); } .hover\:bg-\[var$--ock-bg-inverse$\]:hover{ background-color: var(--ock-bg-inverse); } .hover\:bg-\[var$--ock-bg-inverse-hover$\]:hover{ background-color: var(--ock-bg-inverse-hover); } .hover\:bg-\[var$--ock-bg-primary-hover$\]:hover{ background-color: var(--ock-bg-primary-hover); } .hover\:bg-\[var$--ock-bg-secondary-hover$\]:hover{ background-color: var(--ock-bg-secondary-hover); } .hover\:text-\[var$--ock-text-foreground-muted$\]:hover{ color: var(--ock-text-foreground-muted); } .hover\:underline:hover{ text-decoration-line: underline; } .hover\:opacity-100:hover{ opacity: 1; } .hover\:opacity-80:hover{ opacity: 0.8; } .focus\:border-none:focus{ border-style: none; } .focus\:border-blue-500:focus{ --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); } .focus\:bg-transparent:focus{ background-color: transparent; } .focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-0:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-2:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-2:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-inset:focus-visible{ --tw-ring-inset: inset; } .focus-visible\:ring-\[var$--ock-text-foreground$\]:focus-visible{ --tw-ring-color: var(--ock-text-foreground); } .active\:cursor-grabbing:active{ cursor: grabbing; } .active\:bg-\[var$--ock-bg-alternate-active$\]:active{ background-color: var(--ock-bg-alternate-active); } .active\:bg-\[var$--ock-bg-default-active$\]:active{ background-color: var(--ock-bg-default-active); } .active\:bg-\[var$--ock-bg-inverse-active$\]:active{ background-color: var(--ock-bg-inverse-active); } .active\:bg-\[var$--ock-bg-primary-active$\]:active{ background-color: var(--ock-bg-primary-active); } .active\:bg-\[var$--ock-bg-secondary-active$\]:active{ background-color: var(--ock-bg-secondary-active); } .active\:text-\[var$--ock-text-primary$\]:active{ color: var(--ock-text-primary); } .disabled\:cursor-not-allowed:disabled{ cursor: not-allowed; } .group:hover .group-hover\:opacity-100{ opacity: 1; } .dark\:bg-gray-700:is(.dark *){ --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); } @media not all and (min-width: 640px){ .max-sm\:pt-4{ padding-top: 1rem; } } .\[\&\:\:-webkit-inner-spin-button\]\:m-0::-webkit-inner-spin-button{ margin: 0px; } .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{ -webkit-appearance: none; appearance: none; } .\[\&\:\:-webkit-outer-spin-button\]\:m-0::-webkit-outer-spin-button{ margin: 0px; } .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{ -webkit-appearance: none; appearance: none; } .\[\&\>\*\]\:col-start-1>*{ grid-column-start: 1; } .\[\&\>\*\]\:col-end-1>*{ grid-column-end: 1; } .\[\&\>\*\]\:row-start-1>*{ grid-row-start: 1; } .\[\&\>\*\]\:row-end-1>*{ grid-row-end: 1; } .\[\&\>div\]\:space-x-0>div > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0px * var(--tw-space-x-reverse)); margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse))); } .\[\&\>div\]\:space-x-2>div > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .\[\&_path\]\:fill-\[var$--ock-icon-color-foreground$\] path{ fill: var(--ock-icon-color-foreground); } .\[\&_path\]\:fill-\[var$--ock-icon-color-foreground-muted$\] path{ fill: var(--ock-icon-color-foreground-muted); } .\[\&_path\]\:transition-colors path{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .\[\&_path\]\:ease-in-out path{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .\[\&_path\]\:hover\:fill-\[var$--ock-icon-color-foreground$\]:hover path{ fill: var(--ock-icon-color-foreground); } [V0_FILE]css:file="styles/onchainkit-variables.css" isMerged="true" @tailwind base; @layer base { :root, .light, .default-light { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: theme(colors.gray.50); --ock-text-foreground: theme(colors.gray.950); --ock-text-foreground-muted: theme(colors.gray.600); --ock-text-error: theme(colors.rose.600); --ock-text-primary: theme(colors.indigo.600); --ock-text-success: theme(colors.lime.600); --ock-text-warning: theme(colors.orange.600); --ock-text-disabled: theme(colors.gray.400); --ock-bg-default: theme(colors.gray.50); --ock-bg-default-hover: theme(colors.gray.200); --ock-bg-default-active: theme(colors.gray.300); --ock-bg-alternate: theme(colors.gray.200); --ock-bg-alternate-hover: theme(colors.gray.300); --ock-bg-alternate-active: theme(colors.gray.400); --ock-bg-inverse: theme(colors.gray.100); --ock-bg-inverse-hover: theme(colors.gray.200); --ock-bg-inverse-active: theme(colors.gray.300); --ock-bg-primary: theme(colors.indigo.600); --ock-bg-primary-hover: theme(colors.indigo.700); --ock-bg-primary-active: theme(colors.indigo.800); --ock-bg-primary-washed: theme(colors.indigo.100); --ock-bg-primary-disabled: theme(colors.indigo.300); --ock-bg-secondary: theme(colors.slate.200); --ock-bg-secondary-hover: theme(colors.slate.300); --ock-bg-secondary-active: theme(colors.slate.400); --ock-bg-error: theme(colors.rose.600); --ock-bg-warning: theme(colors.orange.600); --ock-bg-success: theme(colors.lime.300); --ock-bg-default-reverse: theme(colors.gray.950); --ock-icon-color-primary: theme(colors.indigo.600); --ock-icon-color-foreground: theme(colors.gray.950); --ock-icon-color-foreground-muted: theme(colors.gray.600); --ock-icon-color-inverse: theme(colors.gray.50); --ock-icon-color-error: theme(colors.rose.600); --ock-icon-color-success: theme(colors.lime.600); --ock-icon-color-warning: theme(colors.orange.600); --ock-line-primary: theme(colors.indigo.600); --ock-line-default: theme(colors.gray.300); --ock-line-heavy: theme(colors.gray.500); --ock-line-inverse: theme(colors.gray.700); } .dark, .default-dark { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: theme(colors.gray.950); --ock-text-foreground: theme(colors.gray.50); --ock-text-foreground-muted: theme(colors.gray.400); --ock-text-error: theme(colors.rose.400); --ock-text-primary: theme(colors.indigo.400); --ock-text-success: theme(colors.lime.400); --ock-text-warning: theme(colors.orange.400); --ock-text-disabled: theme(colors.gray.600); --ock-bg-default: theme(colors.gray.950); --ock-bg-default-hover: theme(colors.gray.800); --ock-bg-default-active: theme(colors.gray.700); --ock-bg-alternate: theme(colors.gray.800); --ock-bg-alternate-hover: theme(colors.gray.700); --ock-bg-alternate-active: theme(colors.gray.600); --ock-bg-inverse: theme(colors.gray.900); --ock-bg-inverse-hover: theme(colors.gray.800); --ock-bg-inverse-active: theme(colors.gray.700); --ock-bg-primary: theme(colors.indigo.400); --ock-bg-primary-hover: theme(colors.indigo.300); --ock-bg-primary-active: theme(colors.indigo.200); --ock-bg-primary-washed: theme(colors.indigo.900); --ock-bg-primary-disabled: theme(colors.indigo.950); --ock-bg-secondary: theme(colors.slate.800); --ock-bg-secondary-hover: theme(colors.slate.700); --ock-bg-secondary-active: theme(colors.slate.600); --ock-bg-error: theme(colors.rose.400); --ock-bg-warning: theme(colors.orange.400); --ock-bg-success: theme(colors.lime.700); --ock-bg-default-reverse: theme(colors.gray.50); --ock-icon-color-primary: theme(colors.indigo.400); --ock-icon-color-foreground: theme(colors.gray.50); --ock-icon-color-foreground-muted: theme(colors.gray.400); --ock-icon-color-inverse: theme(colors.gray.950); --ock-icon-color-error: theme(colors.rose.400); --ock-icon-color-success: theme(colors.lime.400); --ock-icon-color-warning: theme(colors.orange.400); --ock-line-primary: theme(colors.indigo.400); --ock-line-default: theme(colors.gray.700); --ock-line-heavy: theme(colors.gray.500); --ock-line-inverse: theme(colors.gray.300); } .base-light { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: theme(colors.gray.50); --ock-text-foreground: theme(colors.gray.950); --ock-text-foreground-muted: theme(colors.gray.600); --ock-text-error: theme(colors.rose.600); --ock-text-primary: #0052ff; --ock-text-success: theme(colors.lime.600); --ock-text-warning: theme(colors.orange.600); --ock-text-disabled: theme(colors.gray.400); --ock-bg-default: theme(colors.gray.50); --ock-bg-default-hover: theme(colors.gray.200); --ock-bg-default-active: theme(colors.gray.300); --ock-bg-alternate: theme(colors.gray.200); --ock-bg-alternate-hover: theme(colors.gray.300); --ock-bg-alternate-active: theme(colors.gray.400); --ock-bg-inverse: theme(colors.gray.100); --ock-bg-inverse-hover: theme(colors.gray.200); --ock-bg-inverse-active: theme(colors.gray.300); --ock-bg-primary: #0052ff; --ock-bg-primary-hover: #014ceb; --ock-bg-primary-active: #0148dc; --ock-bg-primary-washed: #b2cbff; --ock-bg-primary-disabled: #9dbcfe; --ock-bg-secondary: theme(colors.slate.200); --ock-bg-secondary-hover: theme(colors.slate.300); --ock-bg-secondary-active: theme(colors.slate.400); --ock-bg-error: theme(colors.rose.600); --ock-bg-warning: theme(colors.orange.600); --ock-bg-success: theme(colors.lime.300); --ock-bg-default-reverse: theme(colors.gray.950); --ock-icon-color-primary: #0052ff; --ock-icon-color-foreground: theme(colors.gray.950); --ock-icon-color-foreground-muted: theme(colors.gray.600); --ock-icon-color-inverse: theme(colors.gray.50); --ock-icon-color-error: theme(colors.rose.600); --ock-icon-color-success: theme(colors.lime.600); --ock-icon-color-warning: theme(colors.orange.600); --ock-line-primary: #0052ff; --ock-line-default: theme(colors.gray.300); --ock-line-heavy: theme(colors.gray.500); --ock-line-inverse: theme(colors.gray.700); } .base-dark { --ock-font-family: 'DM Sans', sans-serif; --ock-border-radius: 0.5rem; --ock-border-radius-inner: 0.25rem; --ock-text-inverse: theme(colors.gray.50); --ock-text-foreground: theme(colors.gray.50); --ock-text-foreground-muted: theme(colors.gray.400); --ock-text-error: theme(colors.rose.400); --ock-text-primary: #578bfa; --ock-text-success: theme(colors.lime.400); --ock-text-warning: theme(colors.orange.400); --ock-text-disabled: theme(colors.gray.600); --ock-bg-default: theme(colors.gray.950); --ock-bg-default-hover: theme(colors.gray.800); --ock-bg-default-active: theme(colors.gray.700); --ock-bg-alternate: theme(colors.gray.800); --ock-bg-alternate-hover: theme(colors.gray.700); --ock-bg-alternate-active: theme(colors.gray.600); --ock-bg-inverse: theme(colors.gray.900); --ock-bg-inverse-hover: theme(colors.gray.800); --ock-bg-inverse-active: theme(colors.gray.700); --ock-bg-primary: #578bfa; --ock-bg-primary-hover: #477ef5; --ock-bg-primary-active: #5386f5; --ock-bg-primary-washed: #051537; --ock-bg-primary-disabled: #1b3365; --ock-bg-secondary: theme(colors.slate.800); --ock-bg-secondary-hover: theme(colors.slate.700); --ock-bg-secondary-active: theme(colors.slate.600); --ock-bg-error: theme(colors.rose.400); --ock-bg-warning: theme(colors.orange.400); --ock-bg-success: theme(colors.lime.700); --ock-bg-default-reverse: theme(colors.gray.50); --ock-icon-color-primary: #578bfa; --ock-icon-color-foreground: theme(colors.gray.50); --ock-icon-color-foreground-muted: theme(colors.gray.400); --ock-icon-color-inverse: theme(colors.gray.950); --ock-icon-color-error: theme(colors.rose.400); --ock-icon-color-success: theme(colors.lime.400); --ock-icon-color-warning: theme(colors.orange.400); --ock-line-primary: #578bfa; --ock-line-default: theme(colors.gray.700); --ock-line-heavy: theme(colors.gray.500); --ock-line-inverse: theme(colors.gray.300); } .cyberpunk { --ock-font-family: 'Oxanium', sans-serif; --ock-border-radius: 0.125rem; --ock-border-radius-inner: 0rem; --ock-text-inverse: theme(colors.gray.950); --ock-text-foreground: theme(colors.gray.50); --ock-text-foreground-muted: theme(colors.gray.400); --ock-text-error: theme(colors.rose.400); --ock-text-primary: theme(colors.fuchsia.400); --ock-text-success: theme(colors.lime.400); --ock-text-warning: theme(colors.orange.400); --ock-text-disabled: theme(colors.gray.600); --ock-bg-default: theme(colors.gray.950); --ock-bg-default-hover: theme(colors.gray.800); --ock-bg-default-active: theme(colors.gray.700); --ock-bg-alternate: theme(colors.gray.800); --ock-bg-alternate-hover: theme(colors.gray.700); --ock-bg-alternate-active: theme(colors.gray.600); --ock-bg-inverse: theme(colors.gray.900); --ock-bg-inverse-hover: theme(colors.gray.800); --ock-bg-inverse-active: theme(colors.gray.700); --ock-bg-primary: theme(colors.fuchsia.400); --ock-bg-primary-hover: theme(colors.fuchsia.300); --ock-bg-primary-active: theme(colors.fuchsia.200); --ock-bg-primary-washed: theme(colors.fuchsia.900); --ock-bg-primary-disabled: theme(colors.fuchsia.950); --ock-bg-secondary: theme(colors.slate.800); --ock-bg-secondary-hover: theme(colors.slate.700); --ock-bg-secondary-active: theme(colors.slate.600); --ock-bg-error: theme(colors.rose.400); --ock-bg-warning: theme(colors.orange.400); --ock-bg-success: theme(colors.lime.400); --ock-bg-default-reverse: theme(colors.gray.50); --ock-icon-color-primary: theme(colors.fuchsia.400); --ock-icon-color-foreground: theme(colors.gray.50); --ock-icon-color-foreground-muted: theme(colors.gray.600); --ock-icon-color-inverse: theme(colors.gray.950); --ock-icon-color-error: theme(colors.rose.600); --ock-icon-color-success: theme(colors.lime.600); --ock-icon-color-warning: theme(colors.orange.600); --ock-line-primary: theme(colors.fuchsia.400); --ock-line-default: theme(colors.gray.700); --ock-line-heavy: theme(colors.gray.500); --ock-line-inverse: theme(colors.gray.300); } .hacker { --ock-font-family: 'Noto Sans Mono', sans-serif; --ock-border-radius: 0.375rem; --ock-border-radius-inner: 0.125rem; --ock-text-inverse: theme(colors.zinc.50); --ock-text-foreground: theme(colors.zinc.950); --ock-text-foreground-muted: theme(colors.zinc.600); --ock-text-error: theme(colors.rose.600); --ock-text-primary: theme(colors.zinc.950); --ock-text-success: theme(colors.lime.600); --ock-text-warning: theme(colors.orange.600); --ock-text-disabled: theme(colors.zinc.400); --ock-bg-default: theme(colors.zinc.50); --ock-bg-default-hover: theme(colors.zinc.200); --ock-bg-default-active: theme(colors.zinc.300); --ock-bg-alternate: theme(colors.zinc.200); --ock-bg-alternate-hover: theme(colors.zinc.300); --ock-bg-alternate-active: theme(colors.zinc.400); --ock-bg-inverse: theme(colors.zinc.100); --ock-bg-inverse-hover: theme(colors.zinc.200); --ock-bg-inverse-active: theme(colors.zinc.300); --ock-bg-primary: theme(colors.zinc.950); --ock-bg-primary-hover: theme(colors.zinc.800); --ock-bg-primary-active: theme(colors.zinc.700); --ock-bg-primary-washed: theme(colors.zinc.100); --ock-bg-primary-disabled: theme(colors.zinc.300); --ock-bg-secondary: theme(colors.neutral.200); --ock-bg-secondary-hover: theme(colors.neutral.300); --ock-bg-secondary-active: theme(colors.neutral.400); --ock-bg-error: theme(colors.rose.600); --ock-bg-warning: theme(colors.orange.600); --ock-bg-success: theme(colors.lime.600); --ock-bg-default-reverse: theme(colors.neutral.50); --ock-icon-color-primary: theme(colors.zinc.950); --ock-icon-color-foreground: theme(colors.zinc.950); --ock-icon-color-foreground-muted: theme(colors.zinc.600); --ock-icon-color-inverse: theme(colors.zinc.50); --ock-icon-color-error: theme(colors.rose.600); --ock-icon-color-success: theme(colors.lime.600); --ock-icon-color-warning: theme(colors.orange.600); --ock-line-primary: theme(colors.zinc.950); --ock-line-default: theme(colors.zinc.300); --ock-line-heavy: theme(colors.zinc.500); --ock-line-inverse: theme(colors.zinc.700); } } @layer components { .animate-enterRight { @apply animate-in slide-in-from-right-8 fade-in duration-500; } .animate-enterUp { @apply animate-in slide-in-from-bottom-8 fade-in duration-500; } .animate-enterDown { @apply animate-in slide-in-from-top-8 fade-in duration-500; } } @tailwind utilities; @layer utilities { /* Chrome, Safari and Opera */ .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-hidden { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } } @tailwind components; [V0_FILE]css:file="styles/theme.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --app-background: #ffffff; --app-foreground: #111111; --app-foreground-muted: #58585c; --app-accent: #0052ff; --app-accent-hover: #0047e1; --app-accent-active: #003db8; --app-accent-light: #e6edff; --app-gray: #f5f5f5; --app-gray-dark: #e0e0e0; --app-card-bg: rgba(255, 255, 255, 0.4); --app-card-border: rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { :root { --app-background: #111111; --app-foreground: #ffffff; --app-foreground-muted: #c8c8d1; --app-accent: #0052ff; --app-accent-hover: #0047e1; --app-accent-active: #003db8; --app-accent-light: #1e293b; --app-gray: #1e1e1e; --app-gray-dark: #2e2e2e; --app-card-bg: rgba(17, 17, 17, 0.4); --app-card-border: rgba(115, 115, 115, 0.5); } } .mini-app-theme { --ock-font-family: sans-serif; --ock-border-radius: 0.75rem; --ock-border-radius-inner: 0.5rem; /* Text colors */ --ock-text-inverse: var(--app-background); --ock-text-foreground: var(--app-foreground); --ock-text-foreground-muted: var(--app-foreground-muted); --ock-text-error: #ef4444; --ock-text-primary: var(--app-accent); --ock-text-success: #22c55e; --ock-text-warning: #f59e0b; --ock-text-disabled: #a1a1aa; /* Background colors */ --ock-bg-default: var(--app-background); --ock-bg-default-hover: var(--app-gray); --ock-bg-default-active: var(--app-gray-dark); --ock-bg-alternate: var(--app-gray); --ock-bg-alternate-hover: var(--app-gray-dark); --ock-bg-alternate-active: var(--app-gray-dark); --ock-bg-inverse: var(--app-foreground); --ock-bg-inverse-hover: #2a2a2a; --ock-bg-inverse-active: #3a3a3a; --ock-bg-primary: var(--app-accent); --ock-bg-primary-hover: var(--app-accent-hover); --ock-bg-primary-active: var(--app-accent-active); --ock-bg-primary-washed: var(--app-accent-light); --ock-bg-primary-disabled: #80a8ff; --ock-bg-secondary: var(--app-gray); --ock-bg-secondary-hover: var(--app-gray-dark); --ock-bg-secondary-active: #d1d1d1; --ock-bg-error: #fee2e2; --ock-bg-warning: #fef3c7; --ock-bg-success: #dcfce7; --ock-bg-default-reverse: var(--app-foreground); /* Icon colors */ --ock-icon-color-primary: var(--app-accent); --ock-icon-color-foreground: var(--app-foreground); --ock-icon-color-foreground-muted: #71717a; --ock-icon-color-inverse: var(--app-background); --ock-icon-color-error: #ef4444; --ock-icon-color-success: #22c55e; --ock-icon-color-warning: #f59e0b; /* Line colors */ --ock-line-primary: var(--app-accent); --ock-line-default: var(--app-gray-dark); --ock-line-heavy: #a1a1aa; --ock-line-inverse: #d4d4d8; } * { touch-action: manipulation; } body { color: var(--app-foreground); background: var(--app-background); font-family: var(--font-geist-sans), sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } @layer utilities { .text-balance { text-wrap: balance; } } .animate-fade-in { animation: fadeIn 0.5s ease-in-out; } .animate-fade-out { animation: fadeOut 3s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss"; const config: Config = { darkMode: "class", content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { 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)", }, animation: { "fade-out": "1s fadeOut 3s ease-out forwards", }, keyframes: { fadeOut: { "0%": { opacity: "1" }, "100%": { opacity: "0" }, }, }, }, }, plugins: [], }; export default config; [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]plaintext:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/OBeuqNFllvzcOxAfozDcmk/app/favicon.ico" isMerged="true" [V0_FILE]xml:file="public/file.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/DwTL2Rsyak235wm-yiG4dI/public/file.svg" isMerged="true" [V0_FILE]xml:file="public/globe.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/01AXmotpqQJ63fKHnt126X/public/globe.svg" isMerged="true" [V0_FILE]png:file="public/hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/eU93CzV4qaY2SFGjEnX8Ln/public/hero.png" isMerged="true" [V0_FILE]png:file="public/icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/MDlwxQeEcV0Sb3R7SndTw-/public/icon.png" isMerged="true" [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/KX2UaHFWfTDDwrBxAVJEdF/public/logo.png" isMerged="true" [V0_FILE]xml:file="public/next.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/XxhCJzp5tSVkhGy6Zfni9Q/public/next.svg" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]png:file="public/screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/ZT5U7UvPgxh7ndPii2Jrfx/public/screenshot.png" isMerged="true" [V0_FILE]png:file="public/splash.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/MRI0-HshS7u-fb9gGYhkSD/public/splash.png" isMerged="true" [V0_FILE]xml:file="public/vercel.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/jJ0tDZIP24y6aCM8r4444t/public/vercel.svg" isMerged="true" [V0_FILE]xml:file="public/window.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_sLKEVY3NlH5V7kq6ASIoODXtF54U/xajfHHqLIXXkEManLFuVFZ/public/window.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/providers.tsx" isEdit="true" isQuickEdit="true" "use client" import type { ReactNode } from "react" import { createConfig, http, WagmiProvider } from "wagmi" import { base, optimism } from "wagmi/chains" import { baseAccount } from "wagmi/connectors" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { farcasterMiniApp } from "@farcaster/miniapp-wagmi-connector" import { MiniKitProvider } from "@coinbase/onchainkit/minikit" export const config = createConfig({ chains: [base, optimism], transports: { [base.id]: http(), [optimism.id]: http(), }, connectors: [farcasterMiniApp(), baseAccount()], }) const queryClient = new QueryClient() export function Providers(props: { children: ReactNode }) { return ( {props.children} ) }