\n \n \n

\n \n

\n\n \n\n

\n \n\n

\n \n\n \n\n \n

\n\n\n\n\n\n\n\n`;\n}\n\n// Start server for local dev, export fetch for Val Town\nif (typeof Deno !== \"undefined\" && !Deno.env?.get?.(\"valtown\")) {\n const port = parseInt(Deno.env?.get?.(\"PORT\") || \"8000\");\n console.log(`🏋️ Routine Stack running at http://localhost:${port}`);\n Deno.serve({ port }, app.fetch);\n}\n\nexport default (typeof Deno !== \"undefined\" && Deno.env?.get?.(\"valtown\")) ? app.fetch : app;\n",[],[644],"3264a5d6-fad2-11f0-a4d3-42dde27851f2","index.html","3264a676-fad2-11f0-a4d3-42dde27851f2",30,["D",1769444114390],"\n\n\n \n \n Routine Stack - Workout Manager\n\n \n \n\n \n\n \n \n\n \n \n\n\n\n

\n \n \n

\n \n

\n\n \n

\n \n\n

\n \n \n\n \n \n\n \n \n

\n \n\n\n\n\n\n\n\n\n\n",[],[653],"32ef0b5e-fad2-11f0-92fd-42dde27851f2","deno.json","32ef0c08-fad2-11f0-92fd-42dde27851f2",48,["D",1769444115290],"{\n \"name\": \"@prague/routine-stack\",\n \"version\": \"1.0.0\",\n \"exports\": \"./main.ts\",\n \"tasks\": {\n \"dev\": \"PORT=8010 deno run --allow-read --allow-env --allow-write --allow-net --watch main.ts\",\n \"serve\": \"PORT=8010 deno run --allow-read --allow-env --allow-write --allow-net --reload=https://esm.town main.ts\",\n \"build:styles\": \"cd styles && deno run --allow-read --allow-write --allow-env --allow-import --allow-sys build.ts\",\n \"build:exercises\": \"deno run -A scripts/build-exercises.ts\",\n \"build\": \"deno task build:styles && deno task build:exercises\",\n \"kill:8010\": \"sh -c 'PID=$(lsof -ti:8010 2>/dev/null); [ -n \\\"$PID\\\" ] && kill -9 $PID || true'\",\n \"wod\": \"deno run -A src/cli/mod.ts\",\n \"wod:list\": \"deno run -A src/cli/mod.ts list routines\",\n \"wod:workouts\": \"deno run -A src/cli/mod.ts list workouts\",\n \"wod:saved\": \"deno run -A src/cli/mod.ts load\",\n \"wod:load\": \"deno run -A src/cli/mod.ts load\",\n \"wod:gen\": \"deno run -A src/cli/mod.ts generate\",\n \"wod:barre\": \"deno run -A src/cli/mod.ts generate --routine=barre\",\n \"wod:morning\": \"deno run -A src/cli/mod.ts generate --routine=morning\",\n \"wod:yoga\": \"deno run -A src/cli/mod.ts generate --routine=yoga\",\n \"wod:gym\": \"deno run -A src/cli/mod.ts generate --routine=gym\",\n \"wod:gym:4x4\": \"deno run -A src/cli/mod.ts generate --workout=4x4x3-block\",\n \"wod:gym:machines\": \"deno run -A src/cli/mod.ts generate --workout=machine-circuit\",\n \"wod:gym:apartment\": \"deno run -A src/cli/mod.ts generate --workout=apartment-gym\",\n \"wod:gym:squat\": \"deno run -A src/cli/mod.ts generate --workout=squat-rack-session\",\n \"wod:gym:rrr\": \"deno run -A src/cli/mod.ts generate --workout=rrr-progressions\",\n \"wod:cardio\": \"deno run -A src/cli/mod.ts generate --routine=cardio\",\n \"wod:cardio:running\": \"deno run -A src/cli/mod.ts generate --workout=fartlek-30\",\n \"wod:cardio:rowing\": \"deno run -A src/cli/mod.ts generate --workout=erg-intervals\",\n \"wod:aj\": \"deno run -A src/cli/mod.ts generate --routine=action-jacqueline\",\n \"wod:random\": \"deno run -A src/cli/mod.ts generate --routine=gym --random\"\n },\n \"imports\": {\n \"hono\": \"https://deno.land/x/hono@v3.11.7/mod.ts\",\n \"zod\": \"npm:zod@^3\",\n \"@std/fs\": \"jsr:@std/fs@^1\",\n \"npm:sass\": \"npm:sass@^1.69.0\",\n \"npm:postcss\": \"npm:postcss@^8.4.31\",\n \"npm:tailwindcss\": \"npm:tailwindcss@^3.3.5\",\n \"npm:autoprefixer\": \"npm:autoprefixer@^10.4.16\"\n },\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ],\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[],[661],"3ed764a2-fad2-11f0-8784-42dde27851f2","AGENTS.md","3ed7657e-fad2-11f0-8784-42dde27851f2",447,["D",1769444135206],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[669],"3ecc4c20-fad2-11f0-ad92-42dde27851f2",".vtignore","3ecc4cf2-fad2-11f0-ad92-42dde27851f2",445,["D",1769444135208],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[677],"328c89e8-fad2-11f0-92fd-42dde27851f2","push-day.json","328c8a9c-fad2-11f0-92fd-42dde27851f2","2f716562-fad2-11f0-be3e-42dde27851f2",35,["D",1769444114622],"{\n \"id\": \"push-day\",\n \"name\": \"Push Day\",\n \"duration\": 45,\n \"tags\": [\"push\", \"upper-body\", \"strength\"],\n \"exercises\": [\n { \"exerciseId\": \"bench-press\", \"sets\": 4, \"reps\": 8, \"rest\": 90 },\n { \"exerciseId\": \"overhead-press\", \"sets\": 3, \"reps\": 10, \"rest\": 60 },\n { \"exerciseId\": \"push-up\", \"sets\": 3, \"reps\": 15, \"rest\": 45 }\n ]\n}\n",[],[693,685],"workouts","32ded932-fad2-11f0-89f3-42dde27851f2","100-reps-barre-leg-challenge.json","32ded9fa-fad2-11f0-89f3-42dde27851f2",45,["D",1769444115183],"{\n \"id\": \"100-reps-barre-leg-challenge\",\n \"name\": \"100-Reps Barre Sculpted Leg Challenge\",\n \"tags\": [\"barre\", \"legs\", \"challenge\", \"30-day\", \"glutes\"],\n \"exercises\": [\n { \"exerciseId\": \"barre-glute-kickback\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-releve-passe\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-clamshell\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-standing-arabesque\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-first-position-plie\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-leg-circles\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-wide-plie-pulse\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-all-fours-side-kick\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-side-lying-leg-lift\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-stability-ball-pulse\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-single-leg-deadlift\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-fire-hydrant\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-plie-releve\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-bridge-single-leg\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-grand-plie-passe\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-prone-glute-lift\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-donkey-kick\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-wide-plie-lift\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-pretzel-lift\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-attitude-position\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-donkey-kick-pulse\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-plie-jump\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-standing-abduction\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-starfish-lift\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-bent-leg-side-lift\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-squat-jump\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-superman\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-scissor-kick\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-bridge-tendu\", \"sets\": 1, \"reps\": 100 },\n { \"exerciseId\": \"barre-rond-de-jambe\", \"sets\": 1, \"reps\": 100 }\n ]\n}\n",[],[693,695],"326b445e-fad2-11f0-879f-42dde27851f2","gentle-flow.json","326b4526-fad2-11f0-879f-42dde27851f2","308c3c2e-fad2-11f0-92fd-42dde27851f2",31,["D",1769444114403],"{\n \"id\": \"gentle-yoga-flow\",\n \"name\": \"Gentle Yoga Flow\",\n \"description\": \"Simple yoga sequence for flexibility and relaxation\",\n \"routineId\": \"yoga\",\n \"tags\": [\"yoga\", \"stretch\", \"relaxation\", \"flexibility\"],\n \"estimatedDuration\": 15,\n \"equipment\": [\"mat\"],\n \"sets\": [\n {\n \"id\": \"grounding\",\n \"name\": \"Grounding\",\n \"type\": \"exercises\",\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"types\": [\"yoga\"], \"tags\": [\"floor\"] }, \"duration\": 60, \"notes\": \"focus on breath\" },\n { \"criteria\": { \"types\": [\"yoga\"], \"tags\": [\"floor\"] }, \"duration\": 90, \"notes\": \"slow, coordinated with breath\" }\n ],\n \"restBetween\": 5,\n \"restAfter\": 15\n },\n {\n \"id\": \"flow\",\n \"name\": \"Flow Sequence\",\n \"type\": \"exercises\",\n \"rounds\": 2,\n \"randomize\": true,\n \"poolSize\": 4,\n \"exercises\": [\n { \"criteria\": { \"types\": [\"yoga\"], \"tags\": [\"standing\"] }, \"duration\": 45 },\n { \"criteria\": { \"types\": [\"yoga\"], \"tags\": [\"standing\"] }, \"duration\": 45 },\n { \"criteria\": { \"types\": [\"yoga\"], \"tags\": [\"floor\"] }, \"duration\": 45 },\n { \"criteria\": { \"types\": [\"yoga\"], \"tags\": [\"floor\"] }, \"duration\": 45 }\n ],\n \"restBetween\": 10,\n \"restAfter\": 30\n },\n {\n \"id\": \"cooldown\",\n \"name\": \"Final Rest\",\n \"type\": \"exercises\",\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"childs-pose\" }, \"duration\": 90 }\n ],\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Move slowly and mindfully\",\n \"Never force a stretch\",\n \"Breathe into tight areas\"\n ]\n}\n",[],[693,711,703],"yoga","308c3b48-fad2-11f0-92fd-42dde27851f2",12,["D",1769444111300],[625],[693,711],"3274d4a6-fad2-11f0-b910-42dde27851f2","wakeup-flow.json","3274d53c-fad2-11f0-b910-42dde27851f2","3067ed1a-fad2-11f0-92fd-42dde27851f2",32,["D",1769444114499],"{\n \"id\": \"morning-wakeup\",\n \"name\": \"Morning Wakeup 4x4x3\",\n \"description\": \"Morning floor workout: 4 blocks of 4 exercises, 3 rounds each. Warmup → Floor Work → Floor Work → Core.\",\n \"routineId\": \"morning\",\n \"tags\": [\"morning\", \"floor\", \"energizing\", \"home\", \"mobility\", \"4x4x3\"],\n \"estimatedDuration\": 25,\n \"equipment\": [\"bodyweight\", \"mat\"],\n \"sets\": [\n {\n \"id\": \"block-1-warmup\",\n \"name\": \"Block 1: Warmup & Mobility\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"poolSize\": 15,\n \"exercises\": [\n { \"criteria\": { \"tags\": [\"breath\", \"breathing\", \"rehab\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45, \"notes\": \"deep belly breaths\" },\n { \"criteria\": { \"tags\": [\"warmup\", \"mobility\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"hip-opener\", \"stretch\"], \"muscles\": [\"hips\", \"hip-flexors\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"warmup\", \"mobility\"], \"types\": [\"yoga\", \"stretch\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 }\n ],\n \"restBetween\": 10,\n \"restAfter\": 60\n },\n {\n \"id\": \"block-2-floor-lower\",\n \"name\": \"Block 2: Floor - Lower Body\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"poolSize\": 15,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"glutes\", \"hamstrings\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\", \"yoga\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"muscles\": [\"quads\", \"glutes\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\", \"yoga\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"muscles\": [\"hips\", \"glutes\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\", \"yoga\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"muscles\": [\"hamstrings\", \"glutes\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\", \"yoga\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 }\n ],\n \"restBetween\": 15,\n \"restAfter\": 60\n },\n {\n \"id\": \"block-3-floor-mixed\",\n \"name\": \"Block 3: Floor - Full Body\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"poolSize\": 20,\n \"exercises\": [\n { \"criteria\": { \"types\": [\"calisthenics\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"types\": [\"calisthenics\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"muscles\": [\"back\", \"shoulders\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\", \"yoga\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"muscles\": [\"chest\", \"triceps\"], \"tags\": [\"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\", \"hip-opener\", \"yoga\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 }\n ],\n \"restBetween\": 15,\n \"restAfter\": 60\n },\n {\n \"id\": \"block-4-core\",\n \"name\": \"Block 4: Core Finisher\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"poolSize\": 20,\n \"exercises\": [\n { \"criteria\": { \"tags\": [\"core\", \"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"core\", \"floor\"], \"muscles\": [\"abs\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"core\", \"floor\"], \"muscles\": [\"obliques\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"core\", \"floor\"], \"excludeTags\": [\"warmup\", \"mobility\", \"stretch\"], \"equipment\": [\"bodyweight\", \"mat\"] }, \"duration\": 45 }\n ],\n \"restBetween\": 15,\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Do this on your carpet or mat right when you wake up\",\n \"4 blocks × 4 exercises × 3 rounds = 48 total exercise slots\",\n \"Each block builds on the last: loosen up → activate → work → core\",\n \"Breathe deeply throughout\",\n \"Skip a round if short on time - you'll still get a complete session\"\n ]\n}\n",[],[693,726,718],"morning","3067ec52-fad2-11f0-92fd-42dde27851f2",11,["D",1769444111061],[623],[693,726],"32c0035e-fad2-11f0-aa23-42dde27851f2","squat-rack.json","32c00412-fad2-11f0-aa23-42dde27851f2","30e4db86-fad2-11f0-994c-42dde27851f2",42,["D",1769444114962],"{\n \"id\": \"squat-rack-session\",\n \"name\": \"Squat Rack Power Session\",\n \"description\": \"Comprehensive squat rack workout: compounds first, then accessories. Traditional strength training structure.\",\n \"routineId\": \"gym\",\n \"tags\": [\"gym\", \"strength\", \"squat-rack\", \"barbell\", \"powerlifting\"],\n \"estimatedDuration\": 55,\n \"equipment\": [\"barbell\", \"squat-rack\", \"plates\"],\n \"sets\": [\n {\n \"id\": \"warmup-mobility\",\n \"name\": \"Mobility Prep\",\n \"type\": \"exercises\",\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"tags\": [\"stretch\", \"mobility\"], \"muscles\": [\"hips\", \"hip-flexors\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"stretch\", \"mobility\"], \"muscles\": [\"hips\", \"hip-flexors\"] }, \"duration\": 30, \"notes\": \"each side\" },\n { \"criteria\": { \"tags\": [\"warmup\", \"mobility\"] }, \"duration\": 30 }\n ],\n \"restBetween\": 10,\n \"restAfter\": 60\n },\n {\n \"id\": \"warmup-squat\",\n \"name\": \"Squat Warmup\",\n \"type\": \"exercises\",\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"squat\" }, \"reps\": 10, \"notes\": \"bodyweight - focus on depth\" },\n { \"criteria\": { \"exerciseId\": \"squat\" }, \"reps\": 8, \"notes\": \"empty bar\" },\n { \"criteria\": { \"exerciseId\": \"squat\" }, \"reps\": 5, \"notes\": \"50% working weight\" }\n ],\n \"restBetween\": 60,\n \"restAfter\": 120\n },\n {\n \"id\": \"main-squat\",\n \"name\": \"Back Squat - Main Lift\",\n \"type\": \"exercises\",\n \"rounds\": 5,\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"squat\" }, \"reps\": 5, \"tempo\": \"3-1-1-0\", \"notes\": \"working weight\" }\n ],\n \"restAfter\": 180\n },\n {\n \"id\": \"accessory-1\",\n \"name\": \"Hip Hinge Accessory\",\n \"type\": \"exercises\",\n \"rounds\": 4,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"hamstrings\", \"glutes\"], \"equipment\": [\"barbell\"], \"tags\": [\"compound\"] }, \"reps\": \"8-10\", \"tempo\": \"3-0-1-1\" }\n ],\n \"restAfter\": 120\n },\n {\n \"id\": \"accessory-2\",\n \"name\": \"Pressing Accessory\",\n \"type\": \"exercises\",\n \"rounds\": 4,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"shoulders\"], \"equipment\": [\"barbell\", \"dumbbell\"] }, \"reps\": \"6-8\" }\n ],\n \"restAfter\": 120\n },\n {\n \"id\": \"accessory-3\",\n \"name\": \"Pulling Accessory\",\n \"type\": \"exercises\",\n \"rounds\": 4,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"back\", \"lats\"], \"tags\": [\"row\", \"pull\"] }, \"reps\": \"8-10\" }\n ],\n \"restAfter\": 120\n },\n {\n \"id\": \"finisher\",\n \"name\": \"Core Finisher\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"tags\": [\"core\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 30 },\n { \"criteria\": { \"tags\": [\"core\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 30 }\n ],\n \"restBetween\": 15,\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Main lift: Add 5 lbs each session until you stall (linear progression)\",\n \"Tempo 3-1-1-0: 3s down, 1s pause at bottom, 1s up, no pause at top\",\n \"Brace core HARD before unracking the bar\",\n \"Use safety pins - they're there for a reason\",\n \"If you miss reps, deload 10% and build back up\"\n ]\n}\n",[],[693,741,733],"gym","32bbbb8c-fad2-11f0-b38d-42dde27851f2","rrr-progressions.json","32bbbc40-fad2-11f0-b38d-42dde27851f2",41,["D",1769444114955],"{\n \"id\": \"rrr-progressions\",\n \"name\": \"Reddit RRR Progressions\",\n \"description\": \"Bodyweight strength training using Reddit Recommended Routine progressions\",\n \"routineId\": \"gym\",\n \"tags\": [\"calisthenics\", \"strength\", \"bodyweight\", \"progressions\"],\n \"estimatedDuration\": 45,\n \"equipment\": [\"bodyweight\", \"pull-up-bar\"],\n \"sets\": [\n {\n \"id\": \"warmup\",\n \"name\": \"Dynamic Warmup\",\n \"type\": \"exercises\",\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"arm-circles\" }, \"duration\": 30 },\n { \"criteria\": { \"exerciseId\": \"lateral-squat\" }, \"duration\": 30 },\n { \"criteria\": { \"exerciseId\": \"inchworm-walkout\" }, \"reps\": 5 }\n ],\n \"restBetween\": 10\n },\n {\n \"id\": \"pair-1\",\n \"name\": \"Pair 1: Pull-ups & Squats\",\n \"type\": \"superset\",\n \"rounds\": 3,\n \"exercises\": [\n { \"criteria\": { \"progression\": \"pull-up-progression\" }, \"reps\": \"5-8\" },\n { \"criteria\": { \"progression\": \"squat-progression\" }, \"reps\": \"5-8\" }\n ],\n \"restBetween\": 90,\n \"restAfter\": 90\n },\n {\n \"id\": \"pair-2\",\n \"name\": \"Pair 2: Dips & Rows\",\n \"type\": \"superset\",\n \"rounds\": 3,\n \"exercises\": [\n { \"criteria\": { \"progression\": \"dip-progression\" }, \"reps\": \"5-8\" },\n { \"criteria\": { \"progression\": \"row-progression\" }, \"reps\": \"5-8\" }\n ],\n \"restBetween\": 90,\n \"restAfter\": 90\n },\n {\n \"id\": \"pair-3\",\n \"name\": \"Pair 3: Push-ups & Hinges\",\n \"type\": \"superset\",\n \"rounds\": 3,\n \"exercises\": [\n { \"criteria\": { \"progression\": \"push-up-progression\" }, \"reps\": \"5-8\" },\n { \"criteria\": { \"progression\": \"hinge-progression\" }, \"reps\": \"5-8\" }\n ],\n \"restBetween\": 90\n }\n ],\n \"tips\": [\n \"Rest 90 seconds between exercises in each pair\",\n \"Each pair: do exercise A, rest, do exercise B, rest, repeat 3x\",\n \"Pick the progression level that lets you do 5-8 clean reps\",\n \"When you can do 3x8, move to the next progression level\"\n ]\n}\n",[],[693,741,743],"32d9df86-fad2-11f0-bd00-42dde27851f2","machine-circuit.json","32d9e04e-fad2-11f0-bd00-42dde27851f2",44,["D",1769444115141],"{\n \"id\": \"machine-circuit\",\n \"name\": \"Machine Introduction Circuit\",\n \"description\": \"Full body machine workout - perfect for gym beginners. Each machine isolates specific muscles with guided movement paths.\",\n \"routineId\": \"gym\",\n \"tags\": [\"gym\", \"machines\", \"circuit\", \"full-body\", \"beginner-friendly\"],\n \"creator\": \"Gym Basics\",\n \"estimatedDuration\": 40,\n \"equipment\": [\"machine\", \"cable\"],\n \"sets\": [\n {\n \"id\": \"warmup\",\n \"name\": \"Cardio Warmup\",\n \"type\": \"activity\",\n \"activity\": {\n \"name\": \"Treadmill or Bike\",\n \"duration\": 5,\n \"intensity\": \"light\",\n \"notes\": \"Get blood flowing before hitting the machines\"\n },\n \"restAfter\": 60\n },\n {\n \"id\": \"chest-shoulders\",\n \"name\": \"Chest & Shoulders\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"chest\"], \"equipment\": [\"machine\"] }, \"reps\": \"12-15\", \"notes\": \"adjust seat first\" },\n { \"criteria\": { \"muscles\": [\"chest\"], \"equipment\": [\"machine\", \"cable\"] }, \"reps\": \"12-15\", \"notes\": \"squeeze at center\" },\n { \"criteria\": { \"muscles\": [\"shoulders\"], \"equipment\": [\"machine\"] }, \"reps\": \"12-15\" }\n ],\n \"restBetween\": 45,\n \"restAfter\": 90\n },\n {\n \"id\": \"back-arms\",\n \"name\": \"Back & Arms\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"lats\", \"back\"], \"equipment\": [\"cable\", \"machine\"] }, \"reps\": \"12-15\", \"notes\": \"pull to upper chest\" },\n { \"criteria\": { \"muscles\": [\"back\"], \"equipment\": [\"cable\", \"machine\"], \"tags\": [\"row\"] }, \"reps\": \"12-15\", \"notes\": \"squeeze shoulder blades\" },\n { \"criteria\": { \"muscles\": [\"biceps\"], \"equipment\": [\"cable\", \"machine\"] }, \"reps\": \"12-15\" },\n { \"criteria\": { \"muscles\": [\"triceps\"], \"equipment\": [\"cable\", \"machine\"] }, \"reps\": \"12-15\" }\n ],\n \"restBetween\": 45,\n \"restAfter\": 90\n },\n {\n \"id\": \"legs\",\n \"name\": \"Legs\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"quads\", \"glutes\"], \"equipment\": [\"machine\"] }, \"reps\": \"12-15\", \"notes\": \"don't lock knees\" },\n { \"criteria\": { \"muscles\": [\"quads\"], \"equipment\": [\"machine\"] }, \"reps\": \"12-15\", \"notes\": \"slow negative\" },\n { \"criteria\": { \"muscles\": [\"hamstrings\"], \"equipment\": [\"machine\"] }, \"reps\": \"12-15\" },\n { \"criteria\": { \"muscles\": [\"calves\"], \"equipment\": [\"machine\"] }, \"reps\": \"15-20\" }\n ],\n \"restBetween\": 45,\n \"restAfter\": 90\n },\n {\n \"id\": \"glutes-hips\",\n \"name\": \"Glutes & Hips\",\n \"type\": \"exercises\",\n \"rounds\": 2,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"muscles\": [\"glutes\", \"hips\"], \"equipment\": [\"machine\"] }, \"reps\": \"15-20\", \"notes\": \"outer glutes\" },\n { \"criteria\": { \"muscles\": [\"hips\", \"adductors\"], \"equipment\": [\"machine\"] }, \"reps\": \"15-20\", \"notes\": \"inner thighs\" }\n ],\n \"restBetween\": 30,\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Adjust each machine to fit YOUR body before starting\",\n \"Start light - focus on feeling the muscle work\",\n \"Control the weight both ways - don't let it slam\",\n \"Ask gym staff if unsure about any machine setup\",\n \"Machines are forgiving - great for learning movement patterns\"\n ]\n}\n",[],[693,741,751],"32ea0bc2-fad2-11f0-aec6-42dde27851f2","apartment-gym.json","32ea0c94-fad2-11f0-aec6-42dde27851f2",47,["D",1769444115008],"{\n \"id\": \"apartment-gym\",\n \"name\": \"Apartment Gym Session\",\n \"description\": \"Full body workout for apartment gyms with limited equipment: floor, bench, and Smith machine.\",\n \"routineId\": \"gym\",\n \"tags\": [\"gym\", \"apartment\", \"smith-machine\", \"bench\", \"full-body\"],\n \"estimatedDuration\": 45,\n \"equipment\": [\"smith-machine\", \"bench\", \"dumbbell\", \"bodyweight\"],\n \"sets\": [\n {\n \"id\": \"warmup\",\n \"name\": \"Floor Warmup\",\n \"type\": \"exercises\",\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"tags\": [\"warmup\", \"floor\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 60 },\n { \"criteria\": { \"tags\": [\"warmup\", \"mobility\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"warmup\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 30 }\n ],\n \"restBetween\": 10,\n \"restAfter\": 60\n },\n {\n \"id\": \"smith-lower\",\n \"name\": \"Smith Machine: Lower Body\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"equipment\": [\"smith-machine\"], \"muscles\": [\"quads\", \"glutes\"] }, \"reps\": \"10-12\", \"notes\": \"feet slightly forward\" },\n { \"criteria\": { \"equipment\": [\"smith-machine\"], \"muscles\": [\"quads\", \"glutes\"] }, \"reps\": 10, \"notes\": \"each leg\" },\n { \"criteria\": { \"equipment\": [\"smith-machine\"], \"muscles\": [\"hamstrings\", \"glutes\"] }, \"reps\": \"10-12\" }\n ],\n \"restBetween\": 60,\n \"restAfter\": 120\n },\n {\n \"id\": \"smith-upper\",\n \"name\": \"Smith Machine: Upper Body\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"equipment\": [\"smith-machine\"], \"muscles\": [\"chest\"] }, \"reps\": \"10-12\" },\n { \"criteria\": { \"equipment\": [\"smith-machine\"], \"muscles\": [\"shoulders\"] }, \"reps\": \"10-12\" },\n { \"criteria\": { \"equipment\": [\"smith-machine\"], \"muscles\": [\"back\", \"lats\"] }, \"reps\": \"10-12\" }\n ],\n \"restBetween\": 60,\n \"restAfter\": 120\n },\n {\n \"id\": \"dumbbell-accessories\",\n \"name\": \"Dumbbell Accessories\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"equipment\": [\"dumbbell\"], \"muscles\": [\"biceps\"] }, \"reps\": \"12-15\" },\n { \"criteria\": { \"equipment\": [\"dumbbell\"], \"muscles\": [\"triceps\"] }, \"reps\": \"12-15\" },\n { \"criteria\": { \"equipment\": [\"dumbbell\"], \"muscles\": [\"shoulders\"] }, \"reps\": \"12-15\" }\n ],\n \"restBetween\": 30,\n \"restAfter\": 90\n },\n {\n \"id\": \"floor-core\",\n \"name\": \"Floor Core Finisher\",\n \"type\": \"exercises\",\n \"rounds\": 2,\n \"randomize\": true,\n \"poolSize\": 10,\n \"exercises\": [\n { \"criteria\": { \"tags\": [\"core\", \"floor\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"core\", \"floor\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"core\", \"floor\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 45 }\n ],\n \"restBetween\": 20,\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Smith machine bar weighs 15-25 lbs depending on model\",\n \"Position feet slightly in front of bar for squats\",\n \"Use the safety catches - that's what they're for\",\n \"Great option when you can't make it to a full gym\"\n ]\n}\n",[],[693,741,759],"32e6b774-fad2-11f0-92fd-42dde27851f2","4x4x3-block.json","32e6b832-fad2-11f0-92fd-42dde27851f2",46,["D",1769444115089],"{\n \"id\": \"4x4x3-block\",\n \"name\": \"4x4x3 Floor & Bench\",\n \"description\": \"Classic block training: 4 blocks of 4 exercises, 3 rounds each. Uses dumbbells, kettlebells, and barbells on floor and bench.\",\n \"routineId\": \"gym\",\n \"tags\": [\"gym\", \"strength\", \"block\", \"full-body\", \"free-weights\"],\n \"estimatedDuration\": 55,\n \"equipment\": [\"dumbbell\", \"kettlebell\", \"barbell\", \"bench\"],\n \"sets\": [\n {\n \"id\": \"warmup\",\n \"name\": \"Dynamic Warmup\",\n \"type\": \"exercises\",\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"arm-circles\" }, \"duration\": 30 },\n { \"criteria\": { \"exerciseId\": \"lateral-squat\" }, \"duration\": 45 },\n { \"criteria\": { \"exerciseId\": \"inchworm-walkout\" }, \"reps\": 5 }\n ],\n \"restBetween\": 10,\n \"restAfter\": 60\n },\n {\n \"id\": \"block-1-legs\",\n \"name\": \"Block 1: Legs\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"kettlebell-goblet-squat\" }, \"reps\": \"10-12\" },\n { \"criteria\": { \"exerciseId\": \"deadlift\" }, \"reps\": \"8-10\" },\n { \"criteria\": { \"exerciseId\": \"single-leg-lunge\" }, \"reps\": 10, \"notes\": \"each leg\" },\n { \"criteria\": { \"muscles\": [\"glutes\"], \"equipment\": [\"bodyweight\"], \"tags\": [\"floor\"] }, \"reps\": \"12-15\" }\n ],\n \"restBetween\": 45,\n \"restAfter\": 120\n },\n {\n \"id\": \"block-2-push\",\n \"name\": \"Block 2: Push\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"bench-press\" }, \"reps\": \"8-10\" },\n { \"criteria\": { \"exerciseId\": \"dumbbell-shoulder-press\" }, \"reps\": \"10-12\" },\n { \"criteria\": { \"exerciseId\": \"dumbbell-chest-fly\" }, \"reps\": \"10-12\" },\n { \"criteria\": { \"exerciseId\": \"tricep-extension\" }, \"reps\": \"12-15\" }\n ],\n \"restBetween\": 45,\n \"restAfter\": 120\n },\n {\n \"id\": \"block-3-pull\",\n \"name\": \"Block 3: Pull\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"gorilla-row\" }, \"reps\": \"8-10\", \"notes\": \"each side\" },\n { \"criteria\": { \"exerciseId\": \"renegade-row\" }, \"reps\": \"8-10\", \"notes\": \"each side\" },\n { \"criteria\": { \"exerciseId\": \"bicep-curl\" }, \"reps\": \"10-12\" },\n { \"criteria\": { \"exerciseId\": \"hammer-curl\" }, \"reps\": \"10-12\" }\n ],\n \"restBetween\": 45,\n \"restAfter\": 120\n },\n {\n \"id\": \"block-4-core\",\n \"name\": \"Block 4: Core\",\n \"type\": \"exercises\",\n \"rounds\": 3,\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"dead-bug\" }, \"duration\": 45 },\n { \"criteria\": { \"exerciseId\": \"weighted-crunch\" }, \"reps\": \"15-20\" },\n { \"criteria\": { \"exerciseId\": \"plank-shoulder-taps\" }, \"duration\": 45 },\n { \"criteria\": { \"tags\": [\"core\", \"obliques\"], \"equipment\": [\"bodyweight\"] }, \"duration\": 45 }\n ],\n \"restBetween\": 30,\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Complete all 4 exercises in a block before the 2-minute rest\",\n \"Use challenging weight - last 2 reps should be tough\",\n \"Total: 4 blocks x 4 exercises x 3 rounds = 48 working sets\",\n \"Superset within blocks to save time\"\n ]\n}\n",[],[693,741,767],"30e4dabe-fad2-11f0-994c-42dde27851f2",15,["D",1769444111882],[617,618,619,620,621],[693,741],"3298145c-fad2-11f0-b38d-42dde27851f2","fartlek.json","3298152e-fad2-11f0-b38d-42dde27851f2","30b2484c-fad2-11f0-92fd-42dde27851f2",37,["D",1769444114716],"{\n \"id\": \"fartlek-30\",\n \"name\": \"30-Minute Fartlek Run\",\n \"description\": \"Speed play intervals for outdoor running - mix of fast and recovery paces\",\n \"routineId\": \"cardio\",\n \"tags\": [\"running\", \"cardio\", \"outdoor\", \"intervals\", \"fartlek\"],\n \"estimatedDuration\": 30,\n \"equipment\": [],\n \"sets\": [\n {\n \"id\": \"warmup\",\n \"name\": \"Warmup Jog\",\n \"type\": \"activity\",\n \"activity\": {\n \"name\": \"Easy Jog\",\n \"duration\": 5,\n \"intensity\": \"easy\",\n \"notes\": \"Conversational pace, loosen up\"\n }\n },\n {\n \"id\": \"fartlek-block\",\n \"name\": \"Fartlek Intervals\",\n \"type\": \"activity\",\n \"rounds\": 6,\n \"activity\": {\n \"name\": \"Fast/Recovery\",\n \"duration\": 3,\n \"intensity\": \"intervals\",\n \"notes\": \"1 min hard (80-90% effort), 2 min easy recovery jog\"\n }\n },\n {\n \"id\": \"tempo\",\n \"name\": \"Tempo Section\",\n \"type\": \"activity\",\n \"activity\": {\n \"name\": \"Tempo Run\",\n \"duration\": 4,\n \"intensity\": \"tempo\",\n \"notes\": \"Comfortably hard - can speak in short phrases\"\n }\n },\n {\n \"id\": \"cooldown\",\n \"name\": \"Cooldown\",\n \"type\": \"activity\",\n \"activity\": {\n \"name\": \"Easy Jog to Walk\",\n \"duration\": 3,\n \"intensity\": \"easy\",\n \"notes\": \"Gradually slow to walk, shake out legs\"\n }\n }\n ],\n \"tips\": [\n \"Listen to your body - adjust intensity as needed\",\n \"Use landmarks for interval triggers if preferred\",\n \"Stay hydrated, especially in warm weather\"\n ]\n}\n",[],[693,788,780],"cardio","32933a2c-fad2-11f0-a4d3-42dde27851f2","erg-intervals.json","32933afe-fad2-11f0-a4d3-42dde27851f2",36,["D",1769444114696],"{\n \"id\": \"erg-intervals\",\n \"name\": \"ERG Rowing Intervals\",\n \"description\": \"Rowing machine interval workout for cardio and conditioning\",\n \"routineId\": \"cardio\",\n \"tags\": [\"cardio\", \"rowing\", \"erg\", \"intervals\", \"conditioning\"],\n \"estimatedDuration\": 25,\n \"equipment\": [\"erg\"],\n \"sets\": [\n {\n \"id\": \"warmup\",\n \"name\": \"Warmup Row\",\n \"type\": \"activity\",\n \"activity\": {\n \"name\": \"Easy Row\",\n \"duration\": 5,\n \"intensity\": \"easy\",\n \"notes\": \"20-22 strokes per minute, focus on form\"\n }\n },\n {\n \"id\": \"intervals\",\n \"name\": \"Work Intervals\",\n \"type\": \"activity\",\n \"rounds\": 6,\n \"activity\": {\n \"name\": \"500m Interval\",\n \"distance\": \"500m\",\n \"intensity\": \"hard\",\n \"notes\": \"Target 1:50-2:00 split, then rest equal time\"\n }\n },\n {\n \"id\": \"rest-between\",\n \"name\": \"Recovery\",\n \"type\": \"rest\",\n \"restDuration\": 120\n },\n {\n \"id\": \"cooldown\",\n \"name\": \"Cooldown Row\",\n \"type\": \"activity\",\n \"activity\": {\n \"name\": \"Easy Row\",\n \"duration\": 3,\n \"intensity\": \"easy\",\n \"notes\": \"Gradually decrease pace\"\n }\n }\n ],\n \"tips\": [\n \"Drive with legs first, then lean back, then pull arms\",\n \"Focus on power per stroke, not stroke rate\",\n \"Keep a consistent split time across intervals\"\n ]\n}\n",[],[693,788,790],"30b2477a-fad2-11f0-92fd-42dde27851f2",13,["D",1769444111547],[614,615],[693,788],"32b51f16-fad2-11f0-92fd-42dde27851f2","simple-barre.json","32b51fb6-fad2-11f0-92fd-42dde27851f2","30d17c30-fad2-11f0-92fd-42dde27851f2",40,["D",1769444114901],"{\n \"id\": \"simple-barre\",\n \"name\": \"Simple 15-Minute Barre\",\n \"description\": \"Quick barre routine for lower body toning\",\n \"routineId\": \"barre\",\n \"tags\": [\"barre\", \"lower-body\", \"quick\"],\n \"estimatedDuration\": 15,\n \"equipment\": [\"bodyweight\"],\n \"sets\": [\n {\n \"id\": \"warmup\",\n \"name\": \"Warmup\",\n \"type\": \"exercises\",\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"barre-first-position-plie\" }, \"duration\": 45 },\n { \"criteria\": { \"exerciseId\": \"barre-releve-passe\" }, \"duration\": 45 }\n ],\n \"restBetween\": 10,\n \"restAfter\": 30\n },\n {\n \"id\": \"standing\",\n \"name\": \"Standing Work\",\n \"type\": \"exercises\",\n \"rounds\": 2,\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"barre-plie-releve\" }, \"duration\": 60 },\n { \"criteria\": { \"exerciseId\": \"barre-attitude-position\" }, \"duration\": 45, \"notes\": \"each side\" },\n { \"criteria\": { \"exerciseId\": \"barre-rond-de-jambe\" }, \"duration\": 45, \"notes\": \"each side\" }\n ],\n \"restBetween\": 10,\n \"restAfter\": 45\n },\n {\n \"id\": \"floor\",\n \"name\": \"Floor Work\",\n \"type\": \"exercises\",\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"barre-donkey-kick\" }, \"duration\": 45, \"notes\": \"each side\" },\n { \"criteria\": { \"exerciseId\": \"barre-fire-hydrant\" }, \"duration\": 45, \"notes\": \"each side\" },\n { \"criteria\": { \"exerciseId\": \"barre-clamshell\" }, \"duration\": 45, \"notes\": \"each side\" }\n ],\n \"restBetween\": 10,\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Keep core engaged throughout\",\n \"Focus on small, controlled movements\",\n \"Maintain proper posture at the barre or chair\"\n ]\n}\n",[],[693,811,803],"barre","32d2d2e0-fad2-11f0-a4d3-42dde27851f2","aj-standing-barre.json","32d2d380-fad2-11f0-a4d3-42dde27851f2",43,["D",1769444114919],"{\n \"id\": \"aj-standing-barre\",\n \"name\": \"Action Jacqueline Standing Barre\",\n \"description\": \"4 classic standing barre exercises - no floor work, no jumping, pure ballet fundamentals\",\n \"routineId\": \"action-jacqueline\",\n \"creator\": \"@actionjacquelyn\",\n \"source\": \"100-Reps Barre Sculpted Leg Challenge\",\n \"tags\": [\"barre\", \"standing\", \"classic\", \"lower-body\"],\n \"estimatedDuration\": 10,\n \"equipment\": [\"bodyweight\", \"barre\"],\n \"sets\": [\n {\n \"id\": \"standing-barre\",\n \"name\": \"Classic Standing Barre\",\n \"type\": \"exercises\",\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"barre-first-position-plie\" }, \"reps\": 100, \"notes\": \"Day 5\" },\n { \"criteria\": { \"exerciseId\": \"barre-wide-plie-pulse\" }, \"reps\": 100, \"notes\": \"Day 7\" },\n { \"criteria\": { \"exerciseId\": \"barre-standing-arabesque\" }, \"reps\": 100, \"notes\": \"Day 4 • 50 each leg\" },\n { \"criteria\": { \"exerciseId\": \"barre-rond-de-jambe\" }, \"reps\": 100, \"notes\": \"Day 30 • 50 each leg\" }\n ],\n \"restBetween\": 30\n }\n ],\n \"tips\": [\n \"Use a chair, wall, or countertop if you don't have a barre\",\n \"Keep movements small and controlled - this is isometric work\",\n \"Focus on turnout and engaging the inner thighs\",\n \"Break into sets of 25 if needed\"\n ]\n}\n",[],[693,811,813],"329cc0d8-fad2-11f0-aa23-42dde27851f2","aj-floor-barre.json","329cc178-fad2-11f0-aa23-42dde27851f2",38,["D",1769444114729],"{\n \"id\": \"aj-floor-barre\",\n \"name\": \"Action Jacqueline Floor Barre\",\n \"description\": \"4 classic floor barre exercises - mat work for glutes and hips\",\n \"routineId\": \"action-jacqueline\",\n \"creator\": \"@actionjacquelyn\",\n \"source\": \"100-Reps Barre Sculpted Leg Challenge\",\n \"tags\": [\"barre\", \"floor\", \"glutes\", \"lower-body\"],\n \"estimatedDuration\": 10,\n \"equipment\": [\"mat\"],\n \"sets\": [\n {\n \"id\": \"floor-barre\",\n \"name\": \"Classic Floor Barre\",\n \"type\": \"exercises\",\n \"exercises\": [\n { \"criteria\": { \"exerciseId\": \"barre-clamshell\" }, \"reps\": 100, \"notes\": \"Day 3 • 50 each side\" },\n { \"criteria\": { \"exerciseId\": \"barre-fire-hydrant\" }, \"reps\": 100, \"notes\": \"Day 12 • 50 each side\" },\n { \"criteria\": { \"exerciseId\": \"barre-side-lying-leg-lift\" }, \"reps\": 100, \"notes\": \"Day 9 • 50 each side\" },\n { \"criteria\": { \"exerciseId\": \"barre-prone-glute-lift\" }, \"reps\": 100, \"notes\": \"Day 16\" }\n ],\n \"restBetween\": 30\n }\n ],\n \"tips\": [\n \"Use a yoga mat for comfort\",\n \"Keep movements small and controlled\",\n \"Focus on the squeeze at the top of each rep\",\n \"Break into sets of 25 if needed\"\n ]\n}\n",[],[693,811,821],"32a60ff8-fad2-11f0-a4d3-42dde27851f2","action-jacqueline-random-4.json","32a610c0-fad2-11f0-a4d3-42dde27851f2",39,["D",1769444114766],"{\n \"id\": \"action-jacqueline-random-4\",\n \"name\": \"Action Jacqueline Random 4\",\n \"description\": \"4 random exercises from @actionjacquelyn's 100-Reps Barre Challenge\",\n \"routineId\": \"action-jacqueline\",\n \"creator\": \"@actionjacquelyn\",\n \"source\": \"100-Reps Barre Sculpted Leg Challenge\",\n \"tags\": [\"barre\", \"lower-body\", \"quick\", \"random\"],\n \"estimatedDuration\": 8,\n \"equipment\": [\"bodyweight\"],\n \"sets\": [\n {\n \"id\": \"random-barre-set\",\n \"name\": \"100-Reps Barre Selection\",\n \"type\": \"exercises\",\n \"randomize\": true,\n \"exercises\": [\n { \"criteria\": { \"challengeCreator\": \"@actionjacquelyn\" }, \"reps\": 100 },\n { \"criteria\": { \"challengeCreator\": \"@actionjacquelyn\" }, \"reps\": 100 },\n { \"criteria\": { \"challengeCreator\": \"@actionjacquelyn\" }, \"reps\": 100 },\n { \"criteria\": { \"challengeCreator\": \"@actionjacquelyn\" }, \"reps\": 100 }\n ],\n \"restBetween\": 30,\n \"restAfter\": 0\n }\n ],\n \"tips\": [\n \"Each exercise is 100 reps - break into sets of 25 if needed\",\n \"Focus on form over speed\",\n \"Keep movements small and controlled\"\n ]\n}\n",[],[693,811,829],"30d17b40-fad2-11f0-92fd-42dde27851f2",14,["D",1769444111752],[609,610,611,612],[693,811],"2f7164b8-fad2-11f0-be3e-42dde27851f2",3,["D",1769444109446],[608,613,616,622,624,626,627],[693],"3365ada4-fad2-11f0-aa23-42dde27851f2","tailwind.css","3365ae76-fad2-11f0-aa23-42dde27851f2","2f98a6c2-fad2-11f0-994c-42dde27851f2",63,["D",1769444115434],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",[],[152,847],"3300efea-fad2-11f0-89f3-42dde27851f2","tailwind.config.js","3300f09e-fad2-11f0-89f3-42dde27851f2",50,["D",1769444115419],"/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"../index.html\",\n \"../main.tsx\",\n \"./app.scss\",\n ],\n theme: {\n extend: {\n colors: {\n background: 'var(--color-bg-page)',\n foreground: 'var(--color-text-primary)',\n muted: {\n DEFAULT: 'var(--color-bg-muted)',\n foreground: 'var(--color-text-muted)',\n },\n card: {\n DEFAULT: 'var(--color-bg-card)',\n },\n primary: {\n DEFAULT: 'var(--color-accent)',\n foreground: 'var(--color-text-on-dark)',\n hover: 'var(--color-accent-hover)',\n light: 'var(--color-accent-light)',\n },\n secondary: {\n DEFAULT: 'var(--color-bg-secondary)',\n foreground: 'var(--color-text-secondary)',\n },\n border: 'var(--color-border)',\n ring: 'var(--color-accent)',\n },\n fontFamily: {\n sans: ['Space Grotesk', 'system-ui', 'sans-serif'],\n mono: ['IBM Plex Mono', 'monospace'],\n },\n },\n },\n plugins: [],\n}\n",[],[152,856],"3307c784-fad2-11f0-aec6-42dde27851f2","postcss.config.js","3307c824-fad2-11f0-aec6-42dde27851f2",52,["D",1769444115450],"export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n",[],[152,864],"34e99c12-fad2-11f0-8355-42dde27851f2","build.ts","34e99d2a-fad2-11f0-8355-42dde27851f2",104,["D",1769444118619],"// Build script for routine-stack styles\n// Creates compiled CSS from design system + Tailwind + app styles\nimport * as sass from \"npm:sass\";\nimport postcss from \"npm:postcss\";\nimport tailwindcss from \"npm:tailwindcss\";\nimport autoprefixer from \"npm:autoprefixer\";\nimport { copy } from \"jsr:@std/fs/copy\";\n\n// ========================================\n// CONFIGURATION\n// ========================================\nconst CONFIG = {\n // Source paths\n DESIGN_SYSTEM_SOURCE: \"../../../../design-engine/packages/styles\",\n DESIGN_SYSTEM_DEST: \"./design-system\",\n APP_STYLES_SCSS: \"./app.scss\",\n TAILWIND_CSS: \"./tailwind.css\",\n\n // Output settings\n OUTPUT_FILE: \"../styles.css\",\n\n // App identifier\n APP_NAME: \"routine-stack\",\n};\n// ========================================\n\nasync function buildStyles() {\n console.log(`\\n🔄 Building ${CONFIG.APP_NAME} styles...\\n`);\n\n // Step 1: Copy the design system\n console.log(\"📁 Step 1: Copying design system...\");\n try {\n try {\n await Deno.remove(CONFIG.DESIGN_SYSTEM_DEST, { recursive: true });\n } catch {\n // Folder doesn't exist, that's fine\n }\n\n await copy(CONFIG.DESIGN_SYSTEM_SOURCE, CONFIG.DESIGN_SYSTEM_DEST, { overwrite: true });\n console.log(` ✅ Copied design system → ${CONFIG.DESIGN_SYSTEM_DEST}`);\n } catch (error) {\n console.error(` ❌ Error copying design system:`, error);\n Deno.exit(1);\n }\n\n // Step 2: Compile design system\n console.log(\"\\n📦 Step 2: Compiling design system...\");\n let designSystemCss = \"\";\n try {\n const themeScssPath = `${CONFIG.DESIGN_SYSTEM_DEST}/theme.scss`;\n const scssContent = await Deno.readTextFile(themeScssPath);\n\n const result = sass.compileString(scssContent, {\n style: \"compressed\",\n loadPaths: [CONFIG.DESIGN_SYSTEM_DEST],\n });\n\n designSystemCss = result.css;\n console.log(` ✅ Compiled design system (compressed)`);\n } catch (error) {\n console.error(` ❌ Error compiling design system:`, error);\n Deno.exit(1);\n }\n\n // Step 3: Build Tailwind utilities\n console.log(\"\\n🎨 Step 3: Building Tailwind utilities...\");\n let tailwindCss = \"\";\n try {\n const tailwindContent = await Deno.readTextFile(CONFIG.TAILWIND_CSS);\n\n const postcssResult = await postcss([\n tailwindcss(\"./tailwind.config.js\"),\n autoprefixer,\n ]).process(tailwindContent, {\n from: CONFIG.TAILWIND_CSS,\n to: CONFIG.OUTPUT_FILE\n });\n\n tailwindCss = postcssResult.css;\n console.log(` ✅ Generated Tailwind utilities`);\n } catch (error) {\n console.error(` ❌ Error building Tailwind:`, error);\n Deno.exit(1);\n }\n\n // Step 4: Compile app-specific SCSS styles\n console.log(\"\\n🎨 Step 4: Compiling app SCSS styles...\");\n let appCss = \"\";\n try {\n const sassResult = sass.compile(CONFIG.APP_STYLES_SCSS, {\n style: \"compressed\",\n });\n\n appCss = sassResult.css;\n console.log(` ✅ Compiled ${CONFIG.APP_STYLES_SCSS}`);\n } catch (error) {\n console.error(` ❌ Error compiling app styles:`, error);\n Deno.exit(1);\n }\n\n // Step 5: Combine and write output\n console.log(\"\\n📝 Step 5: Writing combined CSS...\");\n try {\n const combinedCss = `/* ${CONFIG.APP_NAME} - Generated CSS */\\n${designSystemCss}\\n${tailwindCss}\\n${appCss}`;\n await Deno.writeTextFile(CONFIG.OUTPUT_FILE, combinedCss);\n const totalSize = new TextEncoder().encode(combinedCss).length;\n console.log(` ✅ Created ${CONFIG.OUTPUT_FILE} (${(totalSize / 1024).toFixed(2)} KB)`);\n } catch (error) {\n console.error(` ❌ Error writing CSS:`, error);\n Deno.exit(1);\n }\n\n console.log(\"\\n\" + \"=\".repeat(50));\n console.log(\"📦 Build complete!\");\n console.log(\"=\".repeat(50) + \"\\n\");\n}\n\nif (import.meta.main) {\n await buildStyles();\n}\n",[],[152,872],"34f20794-fad2-11f0-b54c-42dde27851f2","app.scss","34f2083e-fad2-11f0-b54c-42dde27851f2",105,["D",1769444118597],"/**\n * Routine Stack - App-specific Styles\n * Uses design system CSS variables for theming.\n */\n\n// ==========================================================================\n// Base Layout\n// ==========================================================================\n\nhtml, body {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n#app {\n height: 100vh;\n overflow: hidden;\n}\n\n// ==========================================================================\n// Sidebar Provider\n// ==========================================================================\n\n.sidebar-provider {\n display: flex;\n height: 100%;\n background-color: var(--color-bg-primary, #ffffff);\n overflow: hidden;\n position: relative;\n}\n\n// ==========================================================================\n// Sidebar Wrapper\n// ==========================================================================\n\n.sidebar-wrapper {\n position: relative;\n width: var(--sidebar-width, 18rem);\n height: 100%;\n flex-shrink: 0;\n transition: width 200ms ease;\n overflow: hidden;\n}\n\n.sidebar-provider[data-state=\"closed\"] .sidebar-wrapper {\n width: 0;\n}\n\n// ==========================================================================\n// Sidebar\n// ==========================================================================\n\n.sidebar {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n width: var(--sidebar-width, 18rem);\n height: 100%;\n background-color: var(--color-bg-secondary, #f9fafb);\n border-right: 1px solid var(--color-border, #e5e7eb);\n overflow: hidden;\n transform: translateX(0);\n transition: transform 200ms ease;\n}\n\n.sidebar-provider[data-state=\"closed\"] .sidebar {\n transform: translateX(-100%);\n}\n\n// ==========================================================================\n// Sidebar Header\n// ==========================================================================\n\n.sidebar-header {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0.5rem;\n border-bottom: 1px solid var(--color-border, #e5e7eb);\n}\n\n.sidebar-header-content {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0 0.5rem;\n min-height: 2rem;\n}\n\n.sidebar-title {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-text-primary, #111827);\n}\n\n.sidebar-icon {\n flex-shrink: 0;\n width: 1.25rem;\n height: 1.25rem;\n color: var(--color-text-muted, #6b7280);\n}\n\n// ==========================================================================\n// Sidebar Content\n// ==========================================================================\n\n.sidebar-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0.5rem;\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--color-border, #e5e7eb);\n border-radius: 0.375rem;\n }\n}\n\n// ==========================================================================\n// Sidebar Group\n// ==========================================================================\n\n.sidebar-group + .sidebar-group {\n margin-top: 0.75rem;\n}\n\n.sidebar-group-label {\n display: flex;\n align-items: center;\n height: 2rem;\n padding: 0 0.75rem;\n font-size: 0.75rem;\n color: var(--color-text-muted, #6b7280);\n letter-spacing: 0.02em;\n}\n\n.sidebar-group-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 2rem;\n padding: 0 0.75rem;\n border: none;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--color-text-muted, #6b7280);\n font-size: 0.75rem;\n cursor: pointer;\n transition: background-color 150ms ease;\n\n &:hover {\n background-color: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-primary, #111827);\n }\n}\n\n.sidebar-group-chevron {\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n transition: transform 150ms ease;\n\n &.rotated {\n transform: rotate(180deg);\n }\n}\n\n// ==========================================================================\n// Folder Tree Component (simplified from sidebar-layout template)\n// ==========================================================================\n\n.folder-tree {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n}\n\n.folder-tree-folder {\n position: relative;\n}\n\n.folder-tree-folder-row {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n height: 2rem;\n padding: 0 0.5rem;\n border-radius: 0.375rem;\n cursor: pointer;\n transition: background-color 150ms ease;\n\n &:hover {\n background-color: var(--color-bg-muted, #f3f4f6);\n }\n}\n\n.folder-tree-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--color-text-muted, #6b7280);\n cursor: pointer;\n flex-shrink: 0;\n\n &:hover {\n color: var(--color-text-primary, #111827);\n }\n}\n\n.folder-tree-chevron {\n width: 0.75rem;\n height: 0.75rem;\n transition: transform 150ms ease;\n\n &.rotated {\n transform: rotate(90deg);\n }\n}\n\n.folder-tree-icon {\n width: 1rem;\n height: 1rem;\n color: var(--color-text-muted, #6b7280);\n flex-shrink: 0;\n}\n\n.folder-tree-name {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 0.875rem;\n color: var(--color-text-secondary, #374151);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.folder-tree-count {\n font-size: 0.75rem;\n color: var(--color-text-muted, #9ca3af);\n flex-shrink: 0;\n padding: 0.125rem 0.5rem;\n background: transparent;\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 9999px;\n}\n\n// Folder contents (items inside folder)\n.folder-tree-contents {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n margin-left: 1rem;\n padding-left: 0.75rem;\n border-left: 1px solid var(--color-border, #e5e7eb);\n}\n\n// Individual item in folder\n.folder-tree-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n height: 1.75rem;\n padding: 0 0.5rem;\n border-radius: 0.375rem;\n cursor: pointer;\n transition: background-color 150ms ease;\n\n &:hover {\n background-color: var(--color-bg-muted, #f3f4f6);\n }\n\n &.active {\n background-color: var(--color-bg-muted, #f3f4f6);\n font-weight: 500;\n }\n}\n\n.folder-tree-item-btn {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background: transparent;\n font-size: 0.8125rem;\n color: var(--color-text-secondary, #64748b);\n text-align: left;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--color-text-primary, #111827);\n }\n}\n\n.folder-tree-item.active .folder-tree-item-btn {\n color: var(--color-text-primary, #111827);\n}\n\n.folder-tree-shuffle-icon {\n flex-shrink: 0;\n width: 12px;\n height: 12px;\n margin-right: 0.375rem;\n color: var(--color-text-muted, #6b7280);\n opacity: 0.7;\n}\n\n.folder-tree-item.active .folder-tree-shuffle-icon {\n color: var(--color-primary, #3b82f6);\n opacity: 1;\n}\n\n.folder-tree-item-badge {\n flex-shrink: 0;\n padding: 0.125rem 0.375rem;\n font-size: 0.6875rem;\n font-weight: 500;\n background-color: var(--color-text-muted, #6b7280);\n color: #ffffff;\n border-radius: 9999px;\n}\n\n// ==========================================================================\n// Sidebar Menu\n// ==========================================================================\n\n.sidebar-menu {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.sidebar-menu-item {\n position: relative;\n}\n\n.sidebar-menu-button {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n width: 100%;\n height: 2rem;\n padding: 0 0.75rem;\n border: none;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--color-text-secondary, #374151);\n font-size: 0.875rem;\n font-weight: 400;\n text-decoration: none;\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n white-space: nowrap;\n overflow: hidden;\n\n &:hover {\n background-color: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-primary, #111827);\n }\n\n &.active {\n background-color: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-primary, #111827);\n font-weight: 500;\n }\n}\n\n.sidebar-menu-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n}\n\n.sidebar-menu-badge {\n flex-shrink: 0;\n padding: 0.125rem 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n background-color: var(--color-text-muted, #6b7280);\n color: #ffffff;\n border-radius: 9999px;\n\n &.badge-outline {\n background-color: transparent;\n border: 1px solid var(--color-border, #e5e7eb);\n color: var(--color-text-secondary, #374151);\n }\n}\n\n// ==========================================================================\n// Sidebar Footer\n// ==========================================================================\n\n.sidebar-footer {\n flex-shrink: 0;\n padding: 0.5rem 0.75rem;\n border-top: 1px solid var(--color-border, #e5e7eb);\n}\n\n.sidebar-footer-info {\n display: flex;\n align-items: center;\n}\n\n// ==========================================================================\n// Sidebar States\n// ==========================================================================\n\n.sidebar-loading,\n.sidebar-empty {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 1rem;\n font-size: 0.875rem;\n color: var(--color-text-muted, #6b7280);\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n// ==========================================================================\n// Sidebar Trigger\n// ==========================================================================\n\n.sidebar-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border-radius: 0.375rem;\n background: transparent;\n border: 1px solid var(--color-border, #e5e7eb);\n cursor: pointer;\n color: var(--color-text-secondary, #374151);\n transition: background-color 150ms ease, border-color 150ms ease;\n\n &:hover {\n background-color: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-primary, #111827);\n }\n}\n\n.sidebar-trigger-icon {\n color: var(--color-text-muted, #6b7280);\n transition: transform 150ms ease;\n\n &.rotated {\n transform: rotate(180deg);\n }\n}\n\n// ==========================================================================\n// Sidebar Inset (Main Content)\n// ==========================================================================\n\n.sidebar-inset {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n width: 100%;\n background-color: var(--color-bg-primary, #ffffff);\n overflow: hidden;\n}\n\n.sidebar-inset-header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 1rem;\n border-bottom: 1px solid var(--color-border, #e5e7eb);\n}\n\n.sidebar-inset-title {\n font-size: 1rem;\n font-weight: 600;\n color: var(--color-text-primary, #111827);\n margin: 0;\n line-height: 1;\n}\n\n.sidebar-inset-content {\n flex: 1;\n padding: 1.5rem;\n overflow-y: auto;\n}\n\n// ==========================================================================\n// Empty State\n// ==========================================================================\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n color: var(--color-text-muted, #6b7280);\n}\n\n.empty-state-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 64px;\n height: 64px;\n margin-bottom: 1rem;\n background: var(--color-bg-muted, #f3f4f6);\n border-radius: 9999px;\n\n .iconify {\n width: 32px;\n height: 32px;\n color: var(--color-text-muted, #6b7280);\n }\n}\n\n.empty-state-title {\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--color-text-primary, #111827);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state-description {\n font-size: 0.875rem;\n color: var(--color-text-muted, #6b7280);\n margin: 0;\n max-width: 300px;\n}\n\n// ==========================================================================\n// Loading State\n// ==========================================================================\n\n.loading-state {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n height: 100%;\n color: var(--color-text-muted, #6b7280);\n\n .iconify {\n animation: spin 1s linear infinite;\n }\n}\n\n// ==========================================================================\n// Workout Detail\n// ==========================================================================\n\n.workout-detail {\n max-width: 800px;\n}\n\n.workout-header {\n margin-bottom: 1.5rem;\n}\n\n.workout-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n}\n\n.workout-tag {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n background: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-secondary, #374151);\n border-radius: 0.375rem;\n\n .iconify {\n width: 0.75rem;\n height: 0.75rem;\n }\n\n &.tag-beginner {\n background: #dcfce7;\n color: #166534;\n }\n\n &.tag-intermediate {\n background: #fef3c7;\n color: #92400e;\n }\n\n &.tag-advanced {\n background: #fee2e2;\n color: #991b1b;\n }\n}\n\n.workout-description {\n font-size: 1rem;\n color: var(--color-text-secondary, #374151);\n line-height: 1.5;\n margin: 0 0 0.25rem 0;\n}\n\n.workout-tips-inline {\n font-size: 0.9375rem;\n color: var(--color-text-muted, #6b7280);\n line-height: 1.4;\n margin: 0;\n}\n\n// ==========================================================================\n// JSON Section (Collapsible)\n// ==========================================================================\n\n.json-details {\n margin-top: 1.5rem;\n background: var(--color-bg-secondary, #f9fafb);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n.json-summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n user-select: none;\n font-size: 0.75rem;\n color: var(--color-text-muted, #6b7280);\n\n &:hover {\n background: var(--color-bg-muted, #f3f4f6);\n }\n\n &::-webkit-details-marker {\n display: none;\n }\n\n &::before {\n content: '▶';\n font-size: 0.5rem;\n margin-right: 0.5rem;\n transition: transform 150ms ease;\n }\n}\n\n.json-details[open] .json-summary::before {\n transform: rotate(90deg);\n}\n\n.json-summary-text {\n flex: 1;\n}\n\n.copy-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n font-size: 0.75rem;\n color: var(--color-text-muted, #6b7280);\n background: transparent;\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n transition: all 100ms ease;\n\n &:hover {\n background: var(--color-bg-muted, #e5e7eb);\n color: var(--color-text-primary, #111827);\n }\n\n &.copied {\n color: #22c55e;\n }\n\n .iconify {\n width: 0.75rem;\n height: 0.75rem;\n }\n}\n\n.workout-json {\n background: var(--color-bg-primary, #ffffff);\n border-top: 1px solid var(--color-border, #e5e7eb);\n padding: 0.75rem;\n margin: 0;\n overflow-x: auto;\n max-height: 300px;\n overflow-y: auto;\n\n code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 0.625rem;\n color: var(--color-text-secondary, #374151);\n white-space: pre;\n }\n}\n\n.section-title {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-text-primary, #111827);\n margin: 0 0 0.5rem 0;\n}\n\n// Tips are now inline in the header - removed old section styles\n\n// ==========================================================================\n// Utility Classes\n// ==========================================================================\n\n.text-xs {\n font-size: 0.75rem;\n}\n\n.text-muted {\n color: var(--color-text-muted, #6b7280);\n}\n\n// ==========================================================================\n// Shuffle Section\n// ==========================================================================\n\n.shuffle-section {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 1.5rem;\n padding: 0.75rem 1rem;\n background: var(--color-bg-secondary, #f9fafb);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 0.5rem;\n}\n\n.shuffle-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: var(--space-btn-y, 0.5rem) var(--space-btn-x, 1rem);\n font-size: var(--text-button, 0.875rem);\n font-weight: var(--font-medium, 500);\n line-height: var(--leading-normal, 1.5);\n color: var(--color-primary, #2563eb);\n background-color: var(--color-primary-light, #eff6ff);\n border: 1px solid currentColor;\n box-shadow: inset 0 0 0 1px currentColor;\n border-radius: var(--radius-button, 0.375rem);\n cursor: pointer;\n transition: all 150ms ease;\n text-decoration: none;\n\n &:hover {\n background-color: var(--color-primary-lighter, #dbeafe);\n color: var(--color-primary-hover, #1d4ed8);\n }\n\n &:focus {\n outline: none;\n box-shadow: inset 0 0 0 1px currentColor, 0 0 0 var(--ring-width, 3px) var(--color-primary-ring, rgba(37, 99, 235, 0.3));\n }\n\n &:active {\n background-color: var(--color-primary-lightest, #bfdbfe);\n color: var(--color-primary-active, #1e40af);\n }\n\n .iconify {\n width: 1rem;\n height: 1rem;\n }\n}\n\n.shuffle-hint {\n font-size: 0.75rem;\n color: var(--color-text-muted, #6b7280);\n}\n\n// ==========================================================================\n// Generated Sets Section\n// ==========================================================================\n\n.generated-sets-section {\n margin-bottom: 1.5rem;\n}\n\n// Wrapper card for all workout blocks\n.workout-card-container {\n background: var(--color-bg-primary, #ffffff);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 0.5rem;\n padding: 0.75rem;\n}\n\n.generated-set {\n margin-bottom: 0.75rem;\n padding-bottom: 0.5rem;\n\n &:last-child {\n margin-bottom: 0;\n padding-bottom: 0;\n }\n}\n\n.generated-set-header {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n margin-bottom: 0.25rem;\n padding-bottom: 0.25rem;\n border-bottom: 1px solid var(--color-border, #e5e7eb);\n}\n\n.generated-set-name {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-text-primary, #111827);\n}\n\n.generated-set-rounds {\n font-size: 0.6875rem;\n font-weight: 600;\n padding: 0.0625rem 0.375rem;\n background: #dbeafe;\n color: #1d4ed8;\n border-radius: 0.25rem;\n}\n\n.shuffle-set-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n color: var(--color-text-muted, #9ca3af);\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 100ms, color 100ms;\n\n &:hover {\n opacity: 1;\n color: var(--color-primary, #2563eb);\n }\n\n .iconify {\n width: 0.75rem;\n height: 0.75rem;\n }\n}\n\n// Per-exercise shuffle button (for individual exercise shuffling)\n.shuffle-exercise-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n flex-shrink: 0;\n padding: 0;\n background: transparent;\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 0.25rem;\n color: var(--color-text-muted, #6b7280);\n cursor: pointer;\n transition: all 150ms ease;\n\n &:hover {\n background: var(--color-primary-light, #eff6ff);\n border-color: var(--color-primary, #2563eb);\n color: var(--color-primary, #2563eb);\n }\n\n &:active {\n background: var(--color-primary-lighter, #dbeafe);\n transform: scale(0.95);\n }\n\n .iconify {\n width: 0.75rem;\n height: 0.75rem;\n }\n}\n\n// ==========================================================================\n// CLI-Dense Exercise List\n// ==========================================================================\n\n.exercise-list {\n display: flex;\n flex-direction: column;\n}\n\n.exercise-line {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n font-size: 1rem;\n line-height: 1.4;\n border-bottom: 1px solid var(--color-border-light, #f0f0f0);\n\n &:last-child {\n border-bottom: none;\n }\n\n &.expandable {\n cursor: pointer;\n\n &:hover {\n background: var(--color-bg-hover, #fafafa);\n }\n }\n}\n\n.ex-shuffle {\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n padding: 0;\n margin: 0;\n background: none;\n border: none;\n color: var(--color-text-muted, #9ca3af);\n font-size: 0.75rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 100ms, color 100ms;\n\n &:hover {\n opacity: 1;\n color: var(--color-primary, #2563eb);\n }\n}\n\n.ex-name {\n font-weight: 600;\n font-size: 1rem;\n color: var(--color-text-primary, #111827);\n white-space: nowrap;\n}\n\n.ex-duration {\n flex-shrink: 0;\n color: var(--color-primary, #2563eb);\n font-weight: 500;\n font-size: 1rem;\n}\n\n.ex-notes {\n color: var(--color-text-muted, #6b7280);\n font-size: 1rem;\n}\n\n.ex-media-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n color: var(--color-text-muted, #9ca3af);\n\n .iconify {\n width: 1rem;\n height: 1rem;\n }\n}\n\n.ex-expand {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--color-text-muted, #9ca3af);\n margin-left: auto;\n transition: transform 200ms ease;\n\n .iconify {\n width: 1rem;\n height: 1rem;\n }\n\n &.expanded {\n transform: rotate(180deg);\n }\n}\n\n.ex-expanded {\n flex-basis: 100%;\n padding: 0.5rem 0 0.25rem;\n}\n\n.ex-desc {\n font-size: 1rem;\n color: var(--color-text-secondary, #374151);\n line-height: 1.5;\n margin: 0 0 0.5rem 0;\n}\n\n.ex-media {\n max-width: 240px;\n border-radius: 0.375rem;\n overflow: hidden;\n\n img {\n width: 100%;\n height: auto;\n display: block;\n }\n\n iframe {\n width: 100%;\n aspect-ratio: 16 / 9;\n border: none;\n }\n}\n\n// ==========================================================================\n// Exercise Cards Grid\n// ==========================================================================\n\n.exercise-cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 0.75rem;\n}\n\n.exercise-card {\n display: flex;\n flex-direction: column;\n background: var(--color-bg-primary, #ffffff);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 0.5rem;\n overflow: hidden;\n transition: box-shadow 150ms ease, transform 150ms ease;\n\n &:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n transform: translateY(-1px);\n }\n}\n\n.exercise-card-media {\n position: relative;\n width: 100%;\n aspect-ratio: 4 / 3;\n background: var(--color-bg-muted, #f3f4f6);\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 200ms ease;\n }\n\n .exercise-card:hover & img {\n transform: scale(1.02);\n }\n}\n\n.exercise-card-content {\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n padding: 0.75rem;\n}\n\n.exercise-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 0.5rem;\n}\n\n.exercise-card-title {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-text-primary, #111827);\n margin: 0;\n line-height: 1.3;\n}\n\n.exercise-card-day {\n flex-shrink: 0;\n font-size: 0.625rem;\n font-weight: 600;\n padding: 0.125rem 0.375rem;\n background: #dbeafe;\n color: #1d4ed8;\n border-radius: 9999px;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.exercise-card-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.exercise-card-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 0.6875rem;\n font-weight: 500;\n padding: 0.125rem 0.375rem;\n background: var(--color-primary-light, #eff6ff);\n color: var(--color-primary, #2563eb);\n border-radius: 0.25rem;\n\n .iconify {\n width: 0.75rem;\n height: 0.75rem;\n }\n\n &.exercise-card-badge-muted {\n background: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-secondary, #374151);\n }\n}\n\n.exercise-card-notes,\n.exercise-card-description {\n font-size: 0.6875rem;\n line-height: 1.4;\n color: var(--color-text-muted, #6b7280);\n margin: 0;\n // Clamp to 2 lines\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.exercise-card-notes {\n font-style: italic;\n}\n\n// ==========================================================================\n// Exercise Rows (Row-based layout with media on right)\n// Bold, assertive design for workout use\n// ==========================================================================\n\n.exercise-rows {\n display: flex;\n flex-direction: column;\n gap: 0.375rem; // Tighter spacing between rows\n}\n\n.exercise-row {\n display: flex;\n flex-direction: column;\n background: var(--color-bg-primary, #ffffff);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 0.5rem;\n overflow: hidden;\n transition: box-shadow 150ms ease, border-color 150ms ease;\n cursor: pointer;\n\n &:hover {\n border-color: var(--color-border-hover, #d1d5db);\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\n }\n\n &.exercise-row-expanded {\n border-color: var(--color-primary, #2563eb);\n box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);\n }\n}\n\n.exercise-row-main {\n display: flex;\n align-items: baseline; // Baseline alignment\n gap: 0.75rem;\n padding: 0.5rem 0.75rem; // Reduced padding\n min-height: auto; // Remove minimum height\n}\n\n.exercise-row-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: row; // Single row layout\n align-items: baseline;\n gap: 0.75rem;\n flex-wrap: wrap;\n}\n\n.exercise-row-header {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n flex-wrap: nowrap;\n}\n\n.exercise-row-title {\n font-size: 0.9375rem; // Slightly smaller\n font-weight: 600;\n color: var(--color-text-primary, #111827);\n margin: 0;\n line-height: 1.3;\n white-space: nowrap;\n}\n\n.exercise-row-day {\n flex-shrink: 0;\n font-size: 0.625rem;\n font-weight: 600;\n padding: 0.125rem 0.375rem;\n background: #dbeafe;\n color: #1d4ed8;\n border-radius: 9999px;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.exercise-row-meta {\n display: flex;\n flex-wrap: nowrap;\n gap: 0.375rem;\n align-items: baseline;\n}\n\n.exercise-row-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 0.75rem;\n font-weight: 500;\n padding: 0.125rem 0.375rem;\n background: var(--color-primary-light, #eff6ff);\n color: var(--color-primary, #2563eb);\n border-radius: 0.25rem;\n\n .iconify {\n width: 0.75rem;\n height: 0.75rem;\n }\n\n &.exercise-row-badge-muted {\n background: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-secondary, #374151);\n }\n}\n\n.exercise-row-notes {\n font-size: 0.8125rem;\n line-height: 1.4;\n color: var(--color-text-muted, #6b7280);\n margin: 0;\n font-style: italic;\n}\n\n// Media thumbnail on right - compact\n.exercise-row-media {\n flex-shrink: 0;\n width: 3rem;\n height: 2.25rem;\n border-radius: 0.25rem;\n overflow: hidden;\n background: var(--color-bg-muted, #f3f4f6);\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 200ms ease;\n }\n\n .exercise-row:hover & img {\n transform: scale(1.03);\n }\n}\n\n.exercise-media-video {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--color-bg-muted, #f3f4f6);\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.exercise-media-play {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n background: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n padding: 0.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n\n .iconify {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n\n.exercise-media-icon {\n width: 2rem;\n height: 2rem;\n color: var(--color-text-muted, #6b7280);\n}\n\n.exercise-row-expand-icon {\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-text-muted, #6b7280);\n transition: color 150ms ease;\n\n .iconify {\n width: 0.75rem;\n height: 0.75rem;\n }\n\n .exercise-row:hover & {\n color: var(--color-text-secondary, #374151);\n }\n}\n\n// Expanded description panel\n.exercise-row-description {\n padding: 0 0.75rem 0.75rem;\n border-top: 1px solid var(--color-border, #e5e7eb);\n margin-top: 0;\n animation: slideDown 150ms ease;\n\n p {\n font-size: 0.8125rem;\n line-height: 1.6;\n color: var(--color-text-secondary, #374151);\n margin: 0.75rem 0 0;\n }\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-0.5rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n// Embedded video player\n.exercise-row-video-embed {\n margin-top: 0.75rem;\n aspect-ratio: 16 / 9;\n border-radius: 0.375rem;\n overflow: hidden;\n background: #000;\n\n iframe {\n width: 100%;\n height: 100%;\n border: 0;\n }\n}\n\n// Mobile responsive for rows\n@media (max-width: 480px) {\n .exercise-row-main {\n padding: 0.375rem 0.5rem;\n }\n\n .exercise-row-title {\n font-size: 0.8125rem;\n }\n\n .exercise-row-media {\n width: 2.5rem;\n height: 2rem;\n }\n}\n\n// Fallback list styles (keep for non-card contexts)\n.generated-exercises-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.generated-exercise {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n background: var(--color-bg-primary, #ffffff);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: 0.375rem;\n}\n\n.exercise-name {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-text-primary, #111827);\n}\n\n.exercise-detail {\n font-size: 0.75rem;\n font-weight: 500;\n padding: 0.125rem 0.375rem;\n background: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-secondary, #374151);\n border-radius: 0.25rem;\n}\n\n.exercise-note {\n font-size: 0.75rem;\n font-style: italic;\n color: var(--color-text-muted, #6b7280);\n}\n\n.set-rest,\n.set-activity {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n color: var(--color-text-secondary, #374151);\n\n .iconify {\n width: 1rem;\n height: 1rem;\n color: var(--color-text-muted, #6b7280);\n }\n}\n\n// ==========================================================================\n// Mobile Close Button (hidden on desktop)\n// ==========================================================================\n\n.sidebar-close-mobile {\n display: none;\n}\n\n// ==========================================================================\n// Mobile Overlay Backdrop (hidden on desktop)\n// ==========================================================================\n\n.sidebar-overlay {\n display: none;\n}\n\n// ==========================================================================\n// Mobile Styles\n// ==========================================================================\n\n@media (max-width: 767px) {\n // Scroll lock when sidebar is open\n html:has(.sidebar-provider[data-state=\"open\"]) {\n overflow: hidden;\n }\n\n .sidebar-provider {\n position: relative;\n }\n\n // Overlay backdrop\n .sidebar-overlay {\n display: block;\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 40;\n opacity: 0;\n visibility: hidden;\n transition: opacity 200ms ease, visibility 200ms ease;\n -webkit-tap-highlight-color: transparent;\n }\n\n .sidebar-provider[data-state=\"open\"] .sidebar-overlay {\n opacity: 1;\n visibility: visible;\n }\n\n // Sidebar wrapper - fixed and slides in\n .sidebar-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 50;\n height: 100vh;\n height: 100dvh; // Dynamic viewport height for mobile browsers\n width: var(--sidebar-width, 18rem);\n transform: translateX(-100%);\n transition: transform 200ms ease;\n }\n\n .sidebar-provider[data-state=\"open\"] .sidebar-wrapper {\n transform: translateX(0);\n }\n\n .sidebar-provider[data-state=\"closed\"] .sidebar-wrapper {\n width: var(--sidebar-width, 18rem);\n transform: translateX(-100%);\n }\n\n .sidebar {\n width: 100%;\n height: 100%;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n\n // Mobile close button\n .sidebar-close-mobile {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n margin-left: auto;\n padding: 0;\n border: none;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--color-text-muted, #6b7280);\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n\n &:hover {\n background-color: var(--color-bg-muted, #f3f4f6);\n color: var(--color-text-primary, #111827);\n }\n\n .iconify {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n // Adjust header to accommodate close button\n .sidebar-header {\n justify-content: space-between;\n }\n\n .sidebar-inset-content {\n padding: 1rem;\n }\n\n // Safe area handling for notched phones\n .sidebar {\n padding-top: env(safe-area-inset-top);\n padding-bottom: env(safe-area-inset-bottom);\n padding-left: env(safe-area-inset-left);\n }\n}\n",[],[152,880],"3328d8a2-fad2-11f0-bd00-42dde27851f2","theme.scss","3328d96a-fad2-11f0-bd00-42dde27851f2","30fac860-fad2-11f0-b5d3-42dde27851f2",56,["D",1769444115662],"/* ===================================\n Theme Entry Point\n \n Switch themes by commenting/uncommenting the override import.\n The base styles are always included, then theme overrides layer on top.\n\n Make sure to update Tailwind variables in `/styles/config.js` as well\n =================================== */\n\n/* Base styles (always included) */\n@use 'themes/default/all' as *;\n\n/* Theme Overrides - uncomment ONE of these: */\n// @use 'themes/retro/overrides';\n// @use 'themes/startup/overrides';\n// @use 'themes/luma/overrides';\n@use 'themes/groq/overrides';\n\n\n",[],[152,153,888],"3323ec70-fad2-11f0-a4d3-42dde27851f2","3323ed38-fad2-11f0-a4d3-42dde27851f2",55,["D",1769444115631],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* \n * You can add custom @apply-based utilities here\n * Example:\n * \n * .btn-primary {\n * @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;\n * }\n */\n\n",[],[152,153,847],"3304b04e-fad2-11f0-92fd-42dde27851f2","3304b102-fad2-11f0-92fd-42dde27851f2",51,["D",1769444115444],"/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n // Playground HTML files\n \"../../playground/**/*.html\",\n \"../../playground/**/*.js\",\n // Package component demos\n \"../components/**/*.html\",\n \"../components/**/*.ts\",\n // Apps\n \"../../apps/**/*.html\",\n \"../../apps/**/*.ts\",\n ],\n theme: {\n extend: {\n // Groq Theme Colors\n // Map to CSS variables for dynamic theming\n colors: {\n // Groq Orange (Primary Brand)\n 'groq-orange': {\n 50: '#fff5e5',\n 100: '#ffe8cc',\n 200: '#ffd1a3',\n 300: '#ffb973',\n 400: '#fe9e20',\n 500: '#f48b0a',\n 600: '#f43e01', // Main brand color\n 700: '#c23101',\n 800: '#9a2701',\n 900: '#731d00',\n DEFAULT: '#f43e01', // Main brand\n },\n // Groq Gray (Neutral) - matches original palette\n 'groq-gray': {\n 50: '#ffffff',\n 100: '#f3f3ee',\n 200: '#e5e5dc',\n 300: '#cecebf',\n 400: '#9a9a8c',\n 500: '#69695d',\n 600: '#4a4a42',\n 700: '#2d2f33',\n 800: '#26292e',\n 900: '#1a1c1f',\n 950: '#000000',\n DEFAULT: '#26292e', // Primary text\n },\n // Groq Yellow (Extended)\n 'groq-yellow': {\n 200: '#f4fd90',\n 300: '#fdeb20',\n 500: '#e6d000',\n 700: '#c6b802',\n DEFAULT: '#fdeb20',\n },\n // Groq Green (Extended)\n 'groq-green': {\n 200: '#a9ffdb',\n 300: '#10e68d',\n 500: '#0dcc7a',\n 700: '#018b01',\n DEFAULT: '#10e68d',\n },\n // Groq Blue (Extended)\n 'groq-blue': {\n 200: '#bfe4fc',\n 300: '#5fc0ff',\n 500: '#0082a0',\n DEFAULT: '#5fc0ff',\n },\n // Groq Purple (Extended)\n 'groq-purple': {\n 200: '#e3dcf8',\n 300: '#d377fd',\n 500: '#683d7f',\n DEFAULT: '#d377fd',\n },\n // Groq Pink (Extended)\n 'groq-pink': {\n 200: '#fad8ff',\n 300: '#f392dd',\n 500: '#ee66ce',\n DEFAULT: '#f392dd',\n },\n // Semantic color aliases (map to CSS variables for dynamic theming)\n 'primary': 'var(--color-primary)',\n 'primary-hover': 'var(--color-primary-hover)',\n 'accent': 'var(--color-accent)',\n 'success': 'var(--color-success)',\n 'warning': 'var(--color-warning)',\n 'danger': 'var(--color-danger)',\n 'info': 'var(--color-info)',\n },\n },\n },\n plugins: [],\n}\n\n",[],[152,153,856],"3330e0f6-fad2-11f0-a4d3-42dde27851f2","tailwind-compiled.css","3330e1b4-fad2-11f0-a4d3-42dde27851f2",57,["D",1769444115728],"*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. 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)\n2. 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)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n display: none;\n}\n.\\!container {\n width: 100% !important;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 640px) {\n\n .\\!container {\n max-width: 640px !important;\n }\n\n .container {\n max-width: 640px;\n }\n}\n@media (min-width: 768px) {\n\n .\\!container {\n max-width: 768px !important;\n }\n\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n\n .\\!container {\n max-width: 1024px !important;\n }\n\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n\n .\\!container {\n max-width: 1280px !important;\n }\n\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n\n .\\!container {\n max-width: 1536px !important;\n }\n\n .container {\n max-width: 1536px;\n }\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.visible {\n visibility: visible;\n}\n.invisible {\n visibility: hidden;\n}\n.collapse {\n visibility: collapse;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0px;\n}\n.-right-2 {\n right: -0.5rem;\n}\n.-top-2 {\n top: -0.5rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.bottom-full {\n bottom: 100%;\n}\n.left-0 {\n left: 0px;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.left-2 {\n left: 0.5rem;\n}\n.left-3 {\n left: 0.75rem;\n}\n.left-6 {\n left: 1.5rem;\n}\n.left-full {\n left: 100%;\n}\n.right-0 {\n right: 0px;\n}\n.right-1\\.5 {\n right: 0.375rem;\n}\n.right-2 {\n right: 0.5rem;\n}\n.right-3 {\n right: 0.75rem;\n}\n.right-4 {\n right: 1rem;\n}\n.right-6 {\n right: 1.5rem;\n}\n.right-full {\n right: 100%;\n}\n.top-0 {\n top: 0px;\n}\n.top-0\\.5 {\n top: 0.125rem;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-2 {\n top: 0.5rem;\n}\n.top-4 {\n top: 1rem;\n}\n.top-full {\n top: 100%;\n}\n.-z-0 {\n z-index: 0;\n}\n.z-10 {\n z-index: 10;\n}\n.z-20 {\n z-index: 20;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[99\\] {\n z-index: 99;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.\\!m-0 {\n margin: 0px !important;\n}\n.-m-1 {\n margin: -0.25rem;\n}\n.m-0 {\n margin: 0px;\n}\n.m-4 {\n margin: 1rem;\n}\n.m-auto {\n margin: auto;\n}\n.-mx-4 {\n margin-left: -1rem;\n margin-right: -1rem;\n}\n.-my-6 {\n margin-top: -1.5rem;\n margin-bottom: -1.5rem;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.\\!mb-0 {\n margin-bottom: 0px !important;\n}\n.\\!mb-1 {\n margin-bottom: 0.25rem !important;\n}\n.\\!mt-1 {\n margin-top: 0.25rem !important;\n}\n.-mb-4 {\n margin-bottom: -1rem;\n}\n.-mb-px {\n margin-bottom: -1px;\n}\n.-ml-1 {\n margin-left: -0.25rem;\n}\n.-mr-1 {\n margin-right: -0.25rem;\n}\n.-mr-6 {\n margin-right: -1.5rem;\n}\n.-mt-1 {\n margin-top: -0.25rem;\n}\n.mb-0 {\n margin-bottom: 0px;\n}\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n.mb-1\\.5 {\n margin-bottom: 0.375rem;\n}\n.mb-12 {\n margin-bottom: 3rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n.mb-6 {\n margin-bottom: 1.5rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-0\\.5 {\n margin-left: 0.125rem;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.ml-1\\.5 {\n margin-left: 0.375rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.ml-6 {\n margin-left: 1.5rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-1 {\n margin-right: 0.25rem;\n}\n.mr-1\\.5 {\n margin-right: 0.375rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.mr-2\\.5 {\n margin-right: 0.625rem;\n}\n.mr-4 {\n margin-right: 1rem;\n}\n.mr-6 {\n margin-right: 1.5rem;\n}\n.mr-auto {\n margin-right: auto;\n}\n.mt-0\\.5 {\n margin-top: 0.125rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-1\\.5 {\n margin-top: 0.375rem;\n}\n.mt-12 {\n margin-top: 3rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-2\\.5 {\n margin-top: 0.625rem;\n}\n.mt-3 {\n margin-top: 0.75rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.mt-auto {\n margin-top: auto;\n}\n.line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.\\!inline {\n display: inline !important;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.table-caption {\n display: table-caption;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.list-item {\n display: list-item;\n}\n.hidden {\n display: none;\n}\n.aspect-\\[21\\/9\\] {\n aspect-ratio: 21/9;\n}\n.aspect-\\[4\\/3\\] {\n aspect-ratio: 4/3;\n}\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n.aspect-video {\n aspect-ratio: 16 / 9;\n}\n.\\!h-4 {\n height: 1rem !important;\n}\n.\\!h-7 {\n height: 1.75rem !important;\n}\n.\\!h-8 {\n height: 2rem !important;\n}\n.h-1 {\n height: 0.25rem;\n}\n.h-1\\.5 {\n height: 0.375rem;\n}\n.h-10 {\n height: 2.5rem;\n}\n.h-11 {\n height: 2.75rem;\n}\n.h-12 {\n height: 3rem;\n}\n.h-16 {\n height: 4rem;\n}\n.h-2 {\n height: 0.5rem;\n}\n.h-2\\.5 {\n height: 0.625rem;\n}\n.h-20 {\n height: 5rem;\n}\n.h-24 {\n height: 6rem;\n}\n.h-3 {\n height: 0.75rem;\n}\n.h-3\\.5 {\n height: 0.875rem;\n}\n.h-32 {\n height: 8rem;\n}\n.h-4 {\n height: 1rem;\n}\n.h-40 {\n height: 10rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-64 {\n height: 16rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-9 {\n height: 2.25rem;\n}\n.h-96 {\n height: 24rem;\n}\n.h-\\[18px\\] {\n height: 18px;\n}\n.h-\\[480px\\] {\n height: 480px;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100%;\n}\n.h-px {\n height: 1px;\n}\n.h-screen {\n height: 100vh;\n}\n.max-h-20 {\n max-height: 5rem;\n}\n.max-h-48 {\n max-height: 12rem;\n}\n.max-h-60 {\n max-height: 15rem;\n}\n.max-h-64 {\n max-height: 16rem;\n}\n.max-h-96 {\n max-height: 24rem;\n}\n.max-h-\\[180px\\] {\n max-height: 180px;\n}\n.max-h-\\[200px\\] {\n max-height: 200px;\n}\n.max-h-\\[220px\\] {\n max-height: 220px;\n}\n.max-h-\\[240px\\] {\n max-height: 240px;\n}\n.max-h-\\[300px\\] {\n max-height: 300px;\n}\n.max-h-\\[75vh\\] {\n max-height: 75vh;\n}\n.max-h-\\[85vh\\] {\n max-height: 85vh;\n}\n.max-h-\\[95vh\\] {\n max-height: 95vh;\n}\n.\\!min-h-0 {\n min-height: 0px !important;\n}\n.min-h-24 {\n min-height: 6rem;\n}\n.min-h-32 {\n min-height: 8rem;\n}\n.min-h-6 {\n min-height: 1.5rem;\n}\n.min-h-96 {\n min-height: 24rem;\n}\n.min-h-\\[100px\\] {\n min-height: 100px;\n}\n.min-h-\\[100vh\\] {\n min-height: 100vh;\n}\n.min-h-\\[500px\\] {\n min-height: 500px;\n}\n.min-h-\\[50vh\\] {\n min-height: 50vh;\n}\n.min-h-\\[80px\\] {\n min-height: 80px;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.\\!w-7 {\n width: 1.75rem !important;\n}\n.\\!w-full {\n width: 100% !important;\n}\n.w-1\\.5 {\n width: 0.375rem;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-1\\/4 {\n width: 25%;\n}\n.w-10 {\n width: 2.5rem;\n}\n.w-11 {\n width: 2.75rem;\n}\n.w-12 {\n width: 3rem;\n}\n.w-16 {\n width: 4rem;\n}\n.w-2 {\n width: 0.5rem;\n}\n.w-2\\.5 {\n width: 0.625rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-2\\/5 {\n width: 40%;\n}\n.w-20 {\n width: 5rem;\n}\n.w-24 {\n width: 6rem;\n}\n.w-28 {\n width: 7rem;\n}\n.w-3 {\n width: 0.75rem;\n}\n.w-3\\.5 {\n width: 0.875rem;\n}\n.w-3\\/4 {\n width: 75%;\n}\n.w-3\\/5 {\n width: 60%;\n}\n.w-32 {\n width: 8rem;\n}\n.w-4 {\n width: 1rem;\n}\n.w-4\\/5 {\n width: 80%;\n}\n.w-40 {\n width: 10rem;\n}\n.w-48 {\n width: 12rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-5\\/6 {\n width: 83.333333%;\n}\n.w-6 {\n width: 1.5rem;\n}\n.w-64 {\n width: 16rem;\n}\n.w-7 {\n width: 1.75rem;\n}\n.w-72 {\n width: 18rem;\n}\n.w-8 {\n width: 2rem;\n}\n.w-9 {\n width: 2.25rem;\n}\n.w-\\[100px\\] {\n width: 100px;\n}\n.w-\\[150px\\] {\n width: 150px;\n}\n.w-\\[18px\\] {\n width: 18px;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[220px\\] {\n width: 220px;\n}\n.w-\\[240px\\] {\n width: 240px;\n}\n.w-\\[260px\\] {\n width: 260px;\n}\n.w-\\[280px\\] {\n width: 280px;\n}\n.w-\\[40px\\] {\n width: 40px;\n}\n.w-full {\n width: 100%;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.min-w-\\[160px\\] {\n min-width: 160px;\n}\n.min-w-\\[200px\\] {\n min-width: 200px;\n}\n.min-w-\\[2rem\\] {\n min-width: 2rem;\n}\n.min-w-\\[300px\\] {\n min-width: 300px;\n}\n.max-w-2xl {\n max-width: 42rem;\n}\n.max-w-3xl {\n max-width: 48rem;\n}\n.max-w-4xl {\n max-width: 56rem;\n}\n.max-w-5xl {\n max-width: 64rem;\n}\n.max-w-6xl {\n max-width: 72rem;\n}\n.max-w-\\[120px\\] {\n max-width: 120px;\n}\n.max-w-\\[450px\\] {\n max-width: 450px;\n}\n.max-w-\\[500px\\] {\n max-width: 500px;\n}\n.max-w-\\[85\\%\\] {\n max-width: 85%;\n}\n.max-w-\\[95vw\\] {\n max-width: 95vw;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-lg {\n max-width: 32rem;\n}\n.max-w-md {\n max-width: 28rem;\n}\n.max-w-screen-2xl {\n max-width: 1536px;\n}\n.max-w-screen-lg {\n max-width: 1024px;\n}\n.max-w-screen-md {\n max-width: 768px;\n}\n.max-w-screen-sm {\n max-width: 640px;\n}\n.max-w-screen-xl {\n max-width: 1280px;\n}\n.max-w-sm {\n max-width: 24rem;\n}\n.max-w-xl {\n max-width: 36rem;\n}\n.max-w-xs {\n max-width: 20rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.flex-none {\n flex: none;\n}\n.flex-shrink {\n flex-shrink: 1;\n}\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.basis-1 {\n flex-basis: 0.25rem;\n}\n.basis-1\\/3 {\n flex-basis: 33.333333%;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.origin-top-right {\n transform-origin: top right;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n 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));\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n 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));\n}\n.-translate-y-full {\n --tw-translate-y: -100%;\n 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));\n}\n.translate-x-0\\.5 {\n --tw-translate-x: 0.125rem;\n 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));\n}\n.translate-x-3 {\n --tw-translate-x: 0.75rem;\n 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));\n}\n.translate-x-4 {\n --tw-translate-x: 1rem;\n 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));\n}\n.translate-x-5 {\n --tw-translate-x: 1.25rem;\n 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));\n}\n.translate-y-0 {\n --tw-translate-y: 0px;\n 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));\n}\n.translate-y-1 {\n --tw-translate-y: 0.25rem;\n 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));\n}\n.translate-y-2 {\n --tw-translate-y: 0.5rem;\n 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));\n}\n.translate-y-full {\n --tw-translate-y: 100%;\n 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));\n}\n.rotate-180 {\n --tw-rotate: 180deg;\n 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));\n}\n.rotate-90 {\n --tw-rotate: 90deg;\n 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));\n}\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n 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));\n}\n.scale-95 {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n 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));\n}\n.transform {\n 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));\n}\n.animate-\\[progress-stripes_1s_linear_infinite\\] {\n animation: progress-stripes 1s linear infinite;\n}\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.cursor-default {\n cursor: default;\n}\n.cursor-help {\n cursor: help;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-zoom-in {\n cursor: zoom-in;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.select-all {\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n}\n.resize-none {\n resize: none;\n}\n.resize-y {\n resize: vertical;\n}\n.resize-x {\n resize: horizontal;\n}\n.resize {\n resize: both;\n}\n.snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n}\n.snap-mandatory {\n --tw-scroll-snap-strictness: mandatory;\n}\n.snap-start {\n scroll-snap-align: start;\n}\n.list-none {\n list-style-type: none;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.columns-2 {\n -moz-columns: 2;\n columns: 2;\n}\n.break-inside-avoid {\n -moz-column-break-inside: avoid;\n break-inside: avoid;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.items-baseline {\n align-items: baseline;\n}\n.items-stretch {\n align-items: stretch;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.justify-around {\n justify-content: space-around;\n}\n.justify-evenly {\n justify-content: space-evenly;\n}\n.justify-items-start {\n justify-items: start;\n}\n.justify-items-end {\n justify-items: end;\n}\n.justify-items-center {\n justify-items: center;\n}\n.justify-items-stretch {\n justify-items: stretch;\n}\n.gap-0\\.5 {\n gap: 0.125rem;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.-space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(-0.25rem * var(--tw-space-x-reverse));\n margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0px * var(--tw-space-y-reverse));\n}\n.space-y-0\\.5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));\n}\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(3rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.scroll-smooth {\n scroll-behavior: smooth;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.whitespace-pre-line {\n white-space: pre-line;\n}\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.break-all {\n word-break: break-all;\n}\n.\\!rounded-md {\n border-radius: 0.375rem !important;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-\\[32px\\] {\n border-radius: 32px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-b-\\[26px\\] {\n border-bottom-right-radius: 26px;\n border-bottom-left-radius: 26px;\n}\n.rounded-b-lg {\n border-bottom-right-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n}\n.rounded-b-none {\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n.rounded-l-none {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n.rounded-r-lg {\n border-top-right-radius: 0.5rem;\n border-bottom-right-radius: 0.5rem;\n}\n.rounded-r-none {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n.rounded-t-lg {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n}\n.rounded-t-none {\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-4 {\n border-width: 4px;\n}\n.\\!border-l-0 {\n border-left-width: 0px !important;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-b-0 {\n border-bottom-width: 0px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-l {\n border-left-width: 1px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-l-2 {\n border-left-width: 2px;\n}\n.border-l-4 {\n border-left-width: 4px;\n}\n.border-r {\n border-right-width: 1px;\n}\n.border-r-0 {\n border-right-width: 0px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-t-0 {\n border-top-width: 0px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-dashed {\n border-style: dashed;\n}\n.\\!border-none {\n border-style: none !important;\n}\n.border-none {\n border-style: none;\n}\n.border-accent {\n border-color: var(--color-accent);\n}\n.border-blue-100 {\n --tw-border-opacity: 1;\n border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));\n}\n.border-blue-200 {\n --tw-border-opacity: 1;\n border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));\n}\n.border-blue-500 {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));\n}\n.border-danger {\n border-color: var(--color-danger);\n}\n.border-gray-100 {\n --tw-border-opacity: 1;\n border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.border-green-200 {\n --tw-border-opacity: 1;\n border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));\n}\n.border-green-300 {\n --tw-border-opacity: 1;\n border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));\n}\n.border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));\n}\n.border-green-500 {\n --tw-border-opacity: 1;\n border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));\n}\n.border-orange-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));\n}\n.border-orange-300 {\n --tw-border-opacity: 1;\n border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));\n}\n.border-primary {\n border-color: var(--color-primary);\n}\n.border-purple-100 {\n --tw-border-opacity: 1;\n border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));\n}\n.border-purple-200 {\n --tw-border-opacity: 1;\n border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));\n}\n.border-red-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.border-red-300 {\n --tw-border-opacity: 1;\n border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));\n}\n.border-red-400 {\n --tw-border-opacity: 1;\n border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));\n}\n.border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));\n}\n.border-success {\n border-color: var(--color-success);\n}\n.border-transparent {\n border-color: transparent;\n}\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.border-white\\/30 {\n border-color: rgb(255 255 255 / 0.3);\n}\n.border-yellow-400 {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));\n}\n.border-yellow-500 {\n --tw-border-opacity: 1;\n border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));\n}\n.border-t-gray-900 {\n --tw-border-opacity: 1;\n border-top-color: rgb(17 24 39 / var(--tw-border-opacity, 1));\n}\n.border-t-white {\n --tw-border-opacity: 1;\n border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.\\!bg-transparent {\n background-color: transparent !important;\n}\n.bg-accent {\n background-color: var(--color-accent);\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-black\\/0 {\n background-color: rgb(0 0 0 / 0);\n}\n.bg-black\\/20 {\n background-color: rgb(0 0 0 / 0.2);\n}\n.bg-black\\/40 {\n background-color: rgb(0 0 0 / 0.4);\n}\n.bg-black\\/50 {\n background-color: rgb(0 0 0 / 0.5);\n}\n.bg-blue-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50\\/95 {\n background-color: rgb(239 246 255 / 0.95);\n}\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));\n}\n.bg-current {\n background-color: currentColor;\n}\n.bg-danger {\n background-color: var(--color-danger);\n}\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));\n}\n.bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));\n}\n.bg-green-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));\n}\n.bg-green-50\\/95 {\n background-color: rgb(240 253 244 / 0.95);\n}\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));\n}\n.bg-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n.bg-indigo-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));\n}\n.bg-info {\n background-color: var(--color-info);\n}\n.bg-orange-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));\n}\n.bg-primary {\n background-color: var(--color-primary);\n}\n.bg-purple-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));\n}\n.bg-purple-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));\n}\n.bg-red-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n.bg-red-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.bg-red-50\\/95 {\n background-color: rgb(254 242 242 / 0.95);\n}\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));\n}\n.bg-success {\n background-color: var(--color-success);\n}\n.bg-teal-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-warning {\n background-color: var(--color-warning);\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-white\\/50 {\n background-color: rgb(255 255 255 / 0.5);\n}\n.bg-white\\/95 {\n background-color: rgb(255 255 255 / 0.95);\n}\n.bg-yellow-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-50\\/95 {\n background-color: rgb(254 252 232 / 0.95);\n}\n.bg-yellow-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));\n}\n.bg-opacity-50 {\n --tw-bg-opacity: 0.5;\n}\n.bg-\\[linear-gradient\$45deg\\2c rgba\\(255\\2c 255\\2c 255\\2c 0\\.15\$_25\\%\\2c transparent_25\\%\\2c transparent_50\\%\\2c rgba\$255\\2c 255\\2c 255\\2c 0\\.15\$_50\\%\\2c rgba\$255\\2c 255\\2c 255\\2c 0\\.15\$_75\\%\\2c transparent_75\\%\\2c transparent\\)\\] {\n background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-blue-50 {\n --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-green-500 {\n --tw-gradient-from: #22c55e var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-purple-50 {\n --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-green-600 {\n --tw-gradient-to: #16a34a var(--tw-gradient-to-position);\n}\n.to-pink-50 {\n --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);\n}\n.to-purple-50 {\n --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);\n}\n.bg-\\[length\\:1rem_1rem\\] {\n background-size: 1rem 1rem;\n}\n.object-contain {\n -o-object-fit: contain;\n object-fit: contain;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.\\!p-0 {\n padding: 0px !important;\n}\n.\\!p-1 {\n padding: 0.25rem !important;\n}\n.\\!p-1\\.5 {\n padding: 0.375rem !important;\n}\n.\\!p-2 {\n padding: 0.5rem !important;\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-1\\.5 {\n padding: 0.375rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-3 {\n padding: 0.75rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-5 {\n padding: 1.25rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.\\!px-1 {\n padding-left: 0.25rem !important;\n padding-right: 0.25rem !important;\n}\n.\\!px-2 {\n padding-left: 0.5rem !important;\n padding-right: 0.5rem !important;\n}\n.\\!px-3 {\n padding-left: 0.75rem !important;\n padding-right: 0.75rem !important;\n}\n.\\!py-0 {\n padding-top: 0px !important;\n padding-bottom: 0px !important;\n}\n.\\!py-0\\.5 {\n padding-top: 0.125rem !important;\n padding-bottom: 0.125rem !important;\n}\n.\\!py-1 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n.\\!py-1\\.5 {\n padding-top: 0.375rem !important;\n padding-bottom: 0.375rem !important;\n}\n.px-0 {\n padding-left: 0px;\n padding-right: 0px;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-1\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.px-\\[6px\\] {\n padding-left: 6px;\n padding-right: 6px;\n}\n.py-0 {\n padding-top: 0px;\n padding-bottom: 0px;\n}\n.py-0\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-12 {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n.py-16 {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n.\\!pl-0 {\n padding-left: 0px !important;\n}\n.\\!pl-1 {\n padding-left: 0.25rem !important;\n}\n.\\!pl-6 {\n padding-left: 1.5rem !important;\n}\n.\\!pr-2 {\n padding-right: 0.5rem !important;\n}\n.pb-0 {\n padding-bottom: 0px;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-24 {\n padding-bottom: 6rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-\\[6px\\] {\n padding-bottom: 6px;\n}\n.pl-10 {\n padding-left: 2.5rem;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pl-5 {\n padding-left: 1.25rem;\n}\n.pl-6 {\n padding-left: 1.5rem;\n}\n.pr-10 {\n padding-right: 2.5rem;\n}\n.pr-12 {\n padding-right: 3rem;\n}\n.pr-24 {\n padding-right: 6rem;\n}\n.pr-4 {\n padding-right: 1rem;\n}\n.pr-8 {\n padding-right: 2rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-24 {\n padding-top: 6rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.text-justify {\n text-align: justify;\n}\n.align-middle {\n vertical-align: middle;\n}\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n.font-sans {\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.font-serif {\n font-family: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n}\n.text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n.text-6xl {\n font-size: 3.75rem;\n line-height: 1;\n}\n.text-7xl {\n font-size: 4.5rem;\n line-height: 1;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.italic {\n font-style: italic;\n}\n.leading-none {\n line-height: 1;\n}\n.leading-relaxed {\n line-height: 1.625;\n}\n.leading-tight {\n line-height: 1.25;\n}\n.tracking-tight {\n letter-spacing: -0.025em;\n}\n.tracking-tighter {\n letter-spacing: -0.05em;\n}\n.tracking-wide {\n letter-spacing: 0.025em;\n}\n.tracking-wider {\n letter-spacing: 0.05em;\n}\n.tracking-widest {\n letter-spacing: 0.1em;\n}\n.\\!text-gray-300 {\n --tw-text-opacity: 1 !important;\n color: rgb(209 213 219 / var(--tw-text-opacity, 1)) !important;\n}\n.\\!text-gray-400 {\n --tw-text-opacity: 1 !important;\n color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important;\n}\n.text-accent {\n color: var(--color-accent);\n}\n.text-amber-500 {\n --tw-text-opacity: 1;\n color: rgb(245 158 11 / var(--tw-text-opacity, 1));\n}\n.text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity, 1));\n}\n.text-blue-600 {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity, 1));\n}\n.text-blue-700 {\n --tw-text-opacity: 1;\n color: rgb(29 78 216 / var(--tw-text-opacity, 1));\n}\n.text-blue-800 {\n --tw-text-opacity: 1;\n color: rgb(30 64 175 / var(--tw-text-opacity, 1));\n}\n.text-blue-900 {\n --tw-text-opacity: 1;\n color: rgb(30 58 138 / var(--tw-text-opacity, 1));\n}\n.text-danger {\n color: var(--color-danger);\n}\n.text-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(243 244 246 / var(--tw-text-opacity, 1));\n}\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity, 1));\n}\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity, 1));\n}\n.text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-green-700 {\n --tw-text-opacity: 1;\n color: rgb(21 128 61 / var(--tw-text-opacity, 1));\n}\n.text-green-800 {\n --tw-text-opacity: 1;\n color: rgb(22 101 52 / var(--tw-text-opacity, 1));\n}\n.text-green-900 {\n --tw-text-opacity: 1;\n color: rgb(20 83 45 / var(--tw-text-opacity, 1));\n}\n.text-indigo-700 {\n --tw-text-opacity: 1;\n color: rgb(67 56 202 / var(--tw-text-opacity, 1));\n}\n.text-info {\n color: var(--color-info);\n}\n.text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-orange-700 {\n --tw-text-opacity: 1;\n color: rgb(194 65 12 / var(--tw-text-opacity, 1));\n}\n.text-orange-800 {\n --tw-text-opacity: 1;\n color: rgb(154 52 18 / var(--tw-text-opacity, 1));\n}\n.text-primary {\n color: var(--color-primary);\n}\n.text-purple-500 {\n --tw-text-opacity: 1;\n color: rgb(168 85 247 / var(--tw-text-opacity, 1));\n}\n.text-purple-600 {\n --tw-text-opacity: 1;\n color: rgb(147 51 234 / var(--tw-text-opacity, 1));\n}\n.text-purple-700 {\n --tw-text-opacity: 1;\n color: rgb(126 34 206 / var(--tw-text-opacity, 1));\n}\n.text-purple-800 {\n --tw-text-opacity: 1;\n color: rgb(107 33 168 / var(--tw-text-opacity, 1));\n}\n.text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-red-700 {\n --tw-text-opacity: 1;\n color: rgb(185 28 28 / var(--tw-text-opacity, 1));\n}\n.text-red-800 {\n --tw-text-opacity: 1;\n color: rgb(153 27 27 / var(--tw-text-opacity, 1));\n}\n.text-red-900 {\n --tw-text-opacity: 1;\n color: rgb(127 29 29 / var(--tw-text-opacity, 1));\n}\n.text-success {\n color: var(--color-success);\n}\n.text-teal-700 {\n --tw-text-opacity: 1;\n color: rgb(15 118 110 / var(--tw-text-opacity, 1));\n}\n.text-warning {\n color: var(--color-warning);\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n.text-yellow-600 {\n --tw-text-opacity: 1;\n color: rgb(202 138 4 / var(--tw-text-opacity, 1));\n}\n.text-yellow-700 {\n --tw-text-opacity: 1;\n color: rgb(161 98 7 / var(--tw-text-opacity, 1));\n}\n.text-yellow-800 {\n --tw-text-opacity: 1;\n color: rgb(133 77 14 / var(--tw-text-opacity, 1));\n}\n.text-yellow-900 {\n --tw-text-opacity: 1;\n color: rgb(113 63 18 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.line-through {\n text-decoration-line: line-through;\n}\n.no-underline {\n text-decoration-line: none;\n}\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.opacity-25 {\n opacity: 0.25;\n}\n.opacity-30 {\n opacity: 0.3;\n}\n.opacity-50 {\n opacity: 0.5;\n}\n.opacity-60 {\n opacity: 0.6;\n}\n.opacity-75 {\n opacity: 0.75;\n}\n.opacity-90 {\n opacity: 0.9;\n}\n.\\!shadow-none {\n --tw-shadow: 0 0 #0000 !important;\n --tw-shadow-colored: 0 0 #0000 !important;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-\\[0_5px_15px_-3px_rgb\$0_0_0_\\/_0\\.08\$\\] {\n --tw-shadow: 0 5px 15px -3px rgb(0 0 0 / 0.08);\n --tw-shadow-colored: 0 5px 15px -3px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.\\!outline-none {\n outline: 2px solid transparent !important;\n outline-offset: 2px !important;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.\\!ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;\n}\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-primary {\n --tw-ring-color: var(--color-primary);\n}\n.ring-white {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));\n}\n.blur {\n --tw-blur: blur(8px);\n 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);\n}\n.drop-shadow-\\[0_2px_8px_rgba\$0\\2c 0\\2c 0\\2c 0\\.8\$\\] {\n --tw-drop-shadow: drop-shadow(0 2px 8px rgba(0,0,0,0.8));\n 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);\n}\n.grayscale {\n --tw-grayscale: grayscale(100%);\n 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);\n}\n.filter {\n 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);\n}\n.backdrop-blur-sm {\n --tw-backdrop-blur: blur(4px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-filter {\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-100 {\n transition-duration: 100ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.duration-75 {\n transition-duration: 75ms;\n}\n.ease-in {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ease-out {\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* \n * You can add custom @apply-based utilities here\n * Example:\n * \n * .btn-primary {\n * @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;\n * }\n */\n\n.backdrop\\:bg-black\\/90::backdrop {\n background-color: rgb(0 0 0 / 0.9);\n}\n\n.backdrop\\:backdrop-blur-sm::backdrop {\n --tw-backdrop-blur: blur(4px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n}\n\n.after\\:left-\\[2px\\]::after {\n content: var(--tw-content);\n left: 2px;\n}\n\n.after\\:top-\\[2px\\]::after {\n content: var(--tw-content);\n top: 2px;\n}\n\n.after\\:h-5::after {\n content: var(--tw-content);\n height: 1.25rem;\n}\n\n.after\\:w-5::after {\n content: var(--tw-content);\n width: 1.25rem;\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px;\n}\n\n.after\\:border::after {\n content: var(--tw-content);\n border-width: 1px;\n}\n\n.after\\:border-gray-300::after {\n content: var(--tw-content);\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n\n.after\\:bg-white::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n\n.after\\:transition-all::after {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.focus-within\\:border-gray-200:focus-within {\n --tw-border-opacity: 1;\n border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n\n.focus-within\\:bg-white:focus-within {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n\n.focus-within\\:shadow-md:focus-within {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.hover\\:border-blue-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-gray-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-gray-400:hover {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-primary:hover {\n border-color: var(--color-primary);\n}\n\n.hover\\:border-purple-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-purple-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:bg-accent:hover {\n background-color: var(--color-accent);\n}\n\n.hover\\:bg-black\\/5:hover {\n background-color: rgb(0 0 0 / 0.05);\n}\n\n.hover\\:bg-black\\/60:hover {\n background-color: rgb(0 0 0 / 0.6);\n}\n\n.hover\\:bg-blue-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-blue-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-gray-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-gray-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-gray-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-green-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-green-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-primary:hover {\n background-color: var(--color-primary);\n}\n\n.hover\\:bg-primary-hover:hover {\n background-color: var(--color-primary-hover);\n}\n\n.hover\\:bg-red-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-red-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-red-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-white\\/80:hover {\n background-color: rgb(255 255 255 / 0.8);\n}\n\n.hover\\:text-accent:hover {\n color: var(--color-accent);\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-blue-600:hover {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-blue-800:hover {\n --tw-text-opacity: 1;\n color: rgb(30 64 175 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-gray-600:hover {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-gray-700:hover {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-gray-800:hover {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-gray-900:hover {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-green-600:hover {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-green-800:hover {\n --tw-text-opacity: 1;\n color: rgb(22 101 52 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-primary:hover {\n color: var(--color-primary);\n}\n\n.hover\\:text-purple-800:hover {\n --tw-text-opacity: 1;\n color: rgb(107 33 168 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-500:hover {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-600:hover {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-700:hover {\n --tw-text-opacity: 1;\n color: rgb(185 28 28 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-800:hover {\n --tw-text-opacity: 1;\n color: rgb(153 27 27 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:underline:hover {\n text-decoration-line: underline;\n}\n\n.hover\\:opacity-100:hover {\n opacity: 1;\n}\n\n.hover\\:opacity-90:hover {\n opacity: 0.9;\n}\n\n.hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.hover\\:shadow-md:hover {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:border-blue-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));\n}\n\n.focus\\:border-gray-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:\\!ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;\n}\n\n.focus\\:ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));\n}\n\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:ring-2:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus-visible\\:ring-offset-2:focus-visible {\n --tw-ring-offset-width: 2px;\n}\n\n.active\\:scale-95:active {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n 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));\n}\n\n.disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-gray-300:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n\n.disabled\\:bg-gray-50:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n\n.disabled\\:opacity-50:disabled {\n opacity: 0.5;\n}\n\n.group:hover .group-hover\\:visible {\n visibility: visible;\n}\n\n.group:hover .group-hover\\:scale-105 {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n 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));\n}\n\n.group:hover .group-hover\\:scale-110 {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n 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));\n}\n\n.group:hover .group-hover\\:bg-black\\/20 {\n background-color: rgb(0 0 0 / 0.2);\n}\n\n.group:hover .group-hover\\:bg-black\\/30 {\n background-color: rgb(0 0 0 / 0.3);\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n.peer:checked ~ .peer-checked\\:bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));\n}\n\n.peer:checked ~ .peer-checked\\:bg-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n\n.peer:checked ~ .peer-checked\\:after\\:translate-x-full::after {\n content: var(--tw-content);\n --tw-translate-x: 100%;\n 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));\n}\n\n.peer:checked ~ .peer-checked\\:after\\:border-white::after {\n content: var(--tw-content);\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n\n.peer:focus ~ .peer-focus\\:outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.peer:focus ~ .peer-focus\\:ring-4 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.peer:focus ~ .peer-focus\\:ring-blue-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));\n}\n\n.peer:focus ~ .peer-focus\\:ring-green-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));\n}\n\n@media (min-width: 640px) {\n\n .sm\\:mb-6 {\n margin-bottom: 1.5rem;\n }\n\n .sm\\:ml-6 {\n margin-left: 1.5rem;\n }\n\n .sm\\:mr-6 {\n margin-right: 1.5rem;\n }\n\n .sm\\:mt-6 {\n margin-top: 1.5rem;\n }\n\n .sm\\:block {\n display: block;\n }\n\n .sm\\:max-w-md {\n max-width: 28rem;\n }\n\n .sm\\:columns-3 {\n -moz-columns: 3;\n columns: 3;\n }\n\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .sm\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .sm\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .sm\\:flex-row {\n flex-direction: row;\n }\n\n .sm\\:items-center {\n align-items: center;\n }\n\n .sm\\:rounded-md {\n border-radius: 0.375rem;\n }\n\n .sm\\:px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n\n@media (min-width: 768px) {\n\n .md\\:flex {\n display: flex;\n }\n\n .md\\:columns-4 {\n -moz-columns: 4;\n columns: 4;\n }\n\n .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .md\\:grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n\n .md\\:flex-row {\n flex-direction: row;\n }\n}\n\n@media (min-width: 1024px) {\n\n .lg\\:col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .lg\\:grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr));\n }\n\n .lg\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .lg\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .lg\\:grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n\n .lg\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n\n .dark\\:border-green-600 {\n --tw-border-opacity: 1;\n border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));\n }\n\n .dark\\:border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));\n }\n\n .dark\\:border-red-600 {\n --tw-border-opacity: 1;\n border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));\n }\n\n .dark\\:bg-green-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:bg-green-950\\/30 {\n background-color: rgb(5 46 22 / 0.3);\n }\n\n .dark\\:bg-red-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:bg-red-950\\/30 {\n background-color: rgb(69 10 10 / 0.3);\n }\n\n .dark\\:text-green-100 {\n --tw-text-opacity: 1;\n color: rgb(220 252 231 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-green-200 {\n --tw-text-opacity: 1;\n color: rgb(187 247 208 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-100 {\n --tw-text-opacity: 1;\n color: rgb(254 226 226 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-200 {\n --tw-text-opacity: 1;\n color: rgb(254 202 202 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-300 {\n --tw-text-opacity: 1;\n color: rgb(252 165 165 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:hover\\:bg-gray-800:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:hover\\:bg-green-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:hover\\:bg-red-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:hover\\:bg-red-900\\/30:hover {\n background-color: rgb(127 29 29 / 0.3);\n }\n\n .dark\\:hover\\:text-gray-300:hover {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:hover\\:text-green-400:hover {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:hover\\:text-red-400:hover {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n }\n}\n\n.\\[\\&\\:has\$\\[role\\=checkbox\\]\$\\]\\:pr-0:has([role=checkbox]) {\n padding-right: 0px;\n}\n\n",[],[152,153,911],"330ddc1e-fad2-11f0-a4d3-42dde27851f2","330ddcc8-fad2-11f0-a4d3-42dde27851f2",53,["D",1769444115501],"{\n \"name\": \"@prague/styles\",\n \"version\": \"1.0.0\",\n \"exports\": {\n \".\": \"./theme.css\",\n \"./themes/*\": \"./themes/*\",\n \"./tokens/*\": \"./tokens/*\"\n },\n \"tasks\": {\n \"build\": \"deno run -A build.ts\"\n }\n}\n",[],[152,153,661],"331b1df2-fad2-11f0-a956-42dde27851f2","config.js","331b1f1e-fad2-11f0-a956-42dde27851f2",54,["D",1769444115581],"// Design theme configuration\n// ============================================================\n// THEME SWITCHING: Comment/uncomment the import below to switch themes\n// This should match the theme selected in theme.scss\n// ============================================================\n\n// DEFAULT THEME (uncomment this, comment out others)\n// import * as activeTheme from './themes/default/config.js';\n\n// GROQ THEME (uncomment this, comment out others)\nimport * as activeTheme from './themes/groq/config.js';\n\n// RETRO THEME (create retro/config.js first)\n// import * as activeTheme from './themes/retro/config.js';\n\n// STARTUP THEME (create startup/config.js first)\n// import * as activeTheme from './themes/startup/config.js';\n\n// LUMA THEME (create luma/config.js first)\n// import * as activeTheme from './themes/luma/config.js';\n\n// ============================================================\n// Re-export theme data for direct access\n// ============================================================\nexport const themeName = activeTheme.themeName;\nexport const themeDescription = activeTheme.themeDescription;\nexport const typography = activeTheme.typography;\nexport const customColors = activeTheme.customColors;\nexport const semanticColors = activeTheme.semanticColors;\nexport const tailwindExtend = activeTheme.tailwindExtend;\nexport const themeConfig = activeTheme.themeConfig;\n\n// ============================================================\n// Generate Tailwind config script tag from theme data\n// ============================================================\nfunction generateTailwindScript() {\n // Build the color palette entries for Tailwind\n const colorEntries = Object.entries(customColors).map(([key, value]) => {\n return \" '\" + key + \"': window.themeConfig.customColors['\" + key + \"'].palette\";\n }).join(',\\n');\n\n // Build the themeConfig object as a string\n const themeConfigStr = JSON.stringify({\n typography: typography,\n customColors: customColors,\n semanticColors: semanticColors\n }, null, 2);\n\n // Build the complete script\n const script = '\\n';\n\n return script;\n}\n\n// Export the generated tailwind styles\nexport const tailwindStyles = generateTailwindScript();\n\n// Load the compiled theme CSS\nexport async function getStyles() {\n const baseUrl = new URL('.', import.meta.url);\n const cssUrl = new URL('./theme.css', baseUrl);\n const cssPath = cssUrl.protocol === 'file:' ? cssUrl.pathname : cssUrl.href;\n \n const baseCss = await Deno.readTextFile(cssPath);\n \n return {\n tailwind: tailwindStyles,\n baseCss: baseCss\n };\n}\n",[],[152,153,926],"34e6be7a-fad2-11f0-92fd-42dde27851f2","34e6bf10-fad2-11f0-92fd-42dde27851f2",103,["D",1769444118586],"// Build script to compile SCSS to CSS with Tailwind support\n// Supports chunking for deployment targets with file size limits (e.g., Val Town < 100KB)\nimport * as sass from \"npm:sass@^1.69.0\";\nimport postcss from \"npm:postcss@^8.4.31\";\nimport tailwindcss from \"npm:tailwindcss@^3.3.5\";\nimport autoprefixer from \"npm:autoprefixer@^10.4.16\";\n\n// Configuration\nconst MAX_CHUNK_SIZE = 60 * 1024; // 60KB per chunk (for Val Town compatibility)\nconst ENABLE_CHUNKING = false; // Set to true if deploying to Val Town or similar\n\n// Remove empty CSS rule blocks that only contain comments.\n// These get generated when SCSS files have section comments like:\n// .theme-scope { /* Tables */ }\nfunction removeEmptyRules(css: string): string {\n // Pattern matches selectors followed by { optional whitespace/comments only }\n // This handles blocks that are empty or only contain CSS comments\n const emptyRulePattern = /[^{}]+\\{\\s*(\\/\\*[^*]*\\*+(?:[^/*][^*]*\\*+)*\\/\\s*)*\\}/g;\n \n let result = css;\n let previousResult = \"\";\n \n // Keep removing until no more changes (handles nested empty blocks)\n while (result !== previousResult) {\n previousResult = result;\n result = result.replace(emptyRulePattern, (match) => {\n // Extract just the content between braces\n const braceStart = match.indexOf(\"{\");\n const content = match.slice(braceStart + 1, -1).trim();\n \n // Check if content is empty or only contains comments\n const withoutComments = content.replace(/\\/\\*[^*]*\\*+(?:[^/*][^*]*\\*+)*\\//g, \"\").trim();\n \n if (withoutComments === \"\") {\n return \"\"; // Remove the entire empty rule\n }\n return match; // Keep non-empty rules\n });\n }\n \n // Clean up extra blank lines left behind\n result = result.replace(/\\n{3,}/g, \"\\n\\n\");\n \n return result;\n}\n\n// Split CSS into chunks at rule boundaries (doesn't break in middle of a rule)\nfunction splitCssIntoChunks(css: string, maxSize: number): string[] {\n const chunks: string[] = [];\n let currentChunk = \"\";\n \n // Split by top-level rules (at rule boundaries)\n const rules = css.split(/(?<=\\})\\s*(?=[.@#a-zA-Z])/);\n \n for (const rule of rules) {\n const testChunk = currentChunk + rule;\n const testSize = new TextEncoder().encode(testChunk).length;\n \n if (testSize > maxSize && currentChunk.length > 0) {\n chunks.push(currentChunk);\n currentChunk = rule;\n } else {\n currentChunk = testChunk;\n }\n }\n \n if (currentChunk.length > 0) {\n chunks.push(currentChunk);\n }\n \n return chunks;\n}\n\n// Write CSS with optional chunking\nasync function writeCssWithChunking(\n css: string, \n outputPath: string, \n enableChunking: boolean,\n maxChunkSize: number\n): Promise {\n const totalSize = new TextEncoder().encode(css).length;\n const outputFiles: string[] = [];\n \n if (!enableChunking || totalSize <= maxChunkSize) {\n // Write single file\n await Deno.writeTextFile(outputPath, css);\n console.log(` ✅ Created ${outputPath} (${(totalSize / 1024).toFixed(2)} KB)`);\n outputFiles.push(outputPath);\n } else {\n // Split into chunks\n const chunks = splitCssIntoChunks(css, maxChunkSize);\n const basePath = outputPath.replace('.css', '');\n \n for (let i = 0; i < chunks.length; i++) {\n const chunkFile = `${basePath}-${i + 1}.css`;\n await Deno.writeTextFile(chunkFile, chunks[i]);\n const chunkSize = new TextEncoder().encode(chunks[i]).length;\n console.log(` ✅ Created ${chunkFile} (${(chunkSize / 1024).toFixed(2)} KB)`);\n outputFiles.push(chunkFile);\n }\n \n // Create loader instructions\n const loaderContent = `/* CSS Chunks - Include these in order in your HTML:\n${outputFiles.map(f => ` `).join('\\n')}\n\nOr stitch together at runtime in your server (recommended).\n*/\n`;\n const loaderPath = `${basePath}-loader.txt`;\n await Deno.writeTextFile(loaderPath, loaderContent);\n console.log(` ✅ Created ${loaderPath} (instructions)`);\n console.log(`\\n Total: ${(totalSize / 1024).toFixed(2)} KB in ${chunks.length} chunks`);\n }\n \n return outputFiles;\n}\n\nasync function buildStyles() {\n const stylesDir = \".\";\n\n // Build the main theme.scss (the single entry point)\n const themeScssPath = `${stylesDir}/theme.scss`;\n const themeCssPath = `${stylesDir}/theme.css`;\n \n try {\n const scssContent = await Deno.readTextFile(themeScssPath);\n \n const result = sass.compileString(scssContent, {\n style: ENABLE_CHUNKING ? \"compressed\" : \"expanded\",\n loadPaths: [stylesDir],\n });\n \n const cleanedCss = removeEmptyRules(result.css);\n await writeCssWithChunking(cleanedCss, themeCssPath, ENABLE_CHUNKING, MAX_CHUNK_SIZE);\n } catch (error) {\n console.error(`❌ Error compiling theme.scss:`, error.message);\n }\n \n // Build app-specific SCSS files\n await buildAppStyles();\n}\n\nasync function buildAppStyles() {\n const appsDir = \"../../playground/templates\";\n \n try {\n // Find all styles.scss files in app directories\n for await (const entry of Deno.readDir(appsDir)) {\n if (entry.isDirectory) {\n const scssPath = `${appsDir}/${entry.name}/styles.scss`;\n const cssPath = `${appsDir}/${entry.name}/styles.css`;\n \n try {\n // Check if styles.scss exists\n await Deno.stat(scssPath);\n \n // Step 1: Compile SCSS to CSS\n const sassResult = sass.compile(scssPath, {\n style: \"expanded\",\n });\n \n // Step 2: Process through Tailwind/PostCSS for @apply support\n const postcssResult = await postcss([\n tailwindcss(\"./tailwind.config.js\"),\n autoprefixer,\n ]).process(sassResult.css, { \n from: scssPath, \n to: cssPath \n });\n \n await Deno.writeTextFile(cssPath, postcssResult.css);\n console.log(`✅ Compiled ${scssPath} → ${cssPath} (with Tailwind)`);\n } catch (e) {\n // Check if it's just a missing file or an actual error\n if (e instanceof Deno.errors.NotFound) {\n // No styles.scss in this app, skip silently\n } else {\n console.error(`❌ Error compiling ${scssPath}:`, e.message);\n }\n }\n }\n }\n } catch (error) {\n console.error(`❌ Error compiling app styles:`, error.message);\n }\n}\n\n// Build Tailwind CSS with @apply support\nasync function buildTailwind() {\n const inputPath = \"./tailwind.css\";\n const outputPath = \"./tailwind-compiled.css\";\n \n try {\n const css = await Deno.readTextFile(inputPath);\n \n const result = await postcss([\n tailwindcss(\"./tailwind.config.js\"),\n autoprefixer,\n ]).process(css, { \n from: inputPath, \n to: outputPath \n });\n \n await Deno.writeTextFile(outputPath, result.css);\n console.log(`✅ Compiled ${inputPath} → ${outputPath}`);\n } catch (error) {\n console.error(`❌ Error compiling Tailwind:`, error.message);\n }\n}\n\n// Run build\nif (import.meta.main) {\n await buildStyles();\n await buildTailwind();\n}\n",[],[152,153,872],"34b98e64-fad2-11f0-a4d3-42dde27851f2","_typography.scss","34b98f04-fad2-11f0-a4d3-42dde27851f2","317418e6-fad2-11f0-b5d3-42dde27851f2",98,["D",1769444118298],".theme-scope {\n /* ===================================\n Typography Tokens\n =================================== */\n\n /* Font Families */\n --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n --font-mono: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n \n /* Marketing/Display Font (for landing pages, hero sections) */\n --font-display: var(--font-sans);\n \n /* Body Copy Font (for marketing content) */\n --font-marketing: var(--font-sans);\n\n /* Font Sizes */\n --text-xs: 0.75rem; /* 12px */\n --text-sm: 0.875rem; /* 14px */\n --text-base: 1rem; /* 16px */\n --text-lg: 1.125rem; /* 18px */\n --text-xl: 1.25rem; /* 20px */\n --text-2xl: 1.5rem; /* 24px */\n --text-3xl: 1.875rem; /* 30px */\n --text-4xl: 2.25rem; /* 36px */\n\n /* Font Weights */\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 700;\n\n /* Line Heights */\n --leading-none: 1;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n\n /* Letter Spacing */\n --tracking-tighter: -0.05em;\n --tracking-tight: -0.025em;\n --tracking-normal: 0;\n --tracking-wide: 0.025em;\n --tracking-wider: 0.05em;\n\n /* Heading Sizes (semantic) */\n --text-h1: 2rem; /* 32px */\n --text-h2: 1.5rem; /* 24px */\n --text-h3: 1.25rem; /* 20px */\n --text-h4: 1.125rem; /* 18px */\n --text-h5: 1rem; /* 16px */\n --text-h6: 0.875rem; /* 14px */\n\n /* Component-Specific Typography */\n --text-button: var(--text-sm);\n --text-button-sm: var(--text-xs);\n --text-badge: var(--text-xs);\n --text-input: var(--text-sm);\n --text-label: var(--text-sm);\n --text-copy-btn: var(--text-xs);\n}\n\n",[],[152,153,949,941],"tokens","34dd0ace-fad2-11f0-a4d3-42dde27851f2","_spacing.scss","34dd0b6e-fad2-11f0-a4d3-42dde27851f2",102,["D",1769444118530],".theme-scope {\n /* ===================================\n Spacing Tokens (Semantic)\n =================================== */\n\n /* Button Spacing */\n --space-btn-x: 0.875rem; /* 14px - horizontal padding */\n --space-btn-y: 0.5rem; /* 8px - vertical padding */\n --space-btn-sm-x: 0.5rem; /* 8px - small button horizontal */\n --space-btn-sm-y: 0.25rem; /* 4px - small button vertical */\n --space-btn-icon: 0.75rem; /* 12px - icon-only button padding */\n\n /* Input/Form Spacing */\n --space-input-x: 0.75rem; /* 12px - horizontal padding */\n --space-input-y: 0.5rem; /* 8px - vertical padding */\n \n /* Card Spacing */\n // --space-card-padding: 1.25rem; /* 20px - card body padding */\n --space-card-padding: 0.75rem; /* 20px - card body padding */\n \n /* Tab Spacing */\n --space-tab-x: 1rem; /* 16px - tab horizontal spacing */\n --space-tab-y: 0.5rem; /* 8px - tab vertical spacing */\n --space-tab-modern-x: 1rem; /* 16px - modern tab horizontal */\n --space-tab-modern-y: 0.5rem; /* 8px - modern tab vertical */\n --space-tab-btn-x: 1.25rem; /* 20px - button-style tab horizontal */\n --space-tab-btn-y: 0.625rem; /* 10px - button-style tab vertical */\n \n /* Badge Spacing */\n --space-badge-x: 0.625rem; /* 10px - badge horizontal */\n --space-badge-y: 0.25rem; /* 4px - badge vertical */\n --space-badge-sm-x: 0.5rem; /* 8px - small badge horizontal */\n --space-badge-sm-y: 0.125rem; /* 2px - small badge vertical */\n \n /* Dropdown Spacing */\n --space-dropdown-item-x: 0.75rem; /* 12px - dropdown item horizontal */\n --space-dropdown-item-y: 0.5rem; /* 8px - dropdown item vertical */\n \n /* Toast Spacing */\n --space-toast-x: 1rem; /* 16px - toast horizontal */\n --space-toast-y: 1rem; /* 16px - toast vertical */\n \n /* Copy Button Spacing */\n --space-copy-btn-x: 0.625rem; /* 10px - copy button horizontal */\n --space-copy-btn-y: 0.25rem; /* 4px - copy button vertical */\n \n /* Accordion Spacing */\n --space-accordion-x: 1rem; /* 16px - accordion item horizontal */\n --space-accordion-y: 1rem; /* 16px - accordion item vertical */\n \n /* Table Spacing */\n --space-table-cell-x: 0.75rem; /* 12px - table cell horizontal */\n --space-table-cell-y: 0.75rem; /* 12px - table cell vertical */\n \n /* List Item Spacing */\n --space-list-item-x: 1rem; /* 16px - list item horizontal */\n --space-list-item-y: 0.75rem; /* 12px - list item vertical */\n \n /* Pagination Spacing */\n --space-pagination-x: 0.75rem; /* 12px - pagination item horizontal */\n --space-pagination-y: 0.5rem; /* 8px - pagination item vertical */\n \n /* Toggle Group Spacing */\n --space-toggle-x: 0.75rem; /* 12px - toggle item horizontal */\n --space-toggle-y: 0.5rem; /* 8px - toggle item vertical */\n \n /* Gap Spacing (for flex/grid layouts) */\n --space-gap-xs: 0.25rem; /* 4px */\n --space-gap-sm: 0.5rem; /* 8px */\n --space-gap-md: 1rem; /* 16px */\n --space-gap-lg: 1.5rem; /* 24px */\n}\n\n",[],[152,153,949,951],"34d4a3a2-fad2-11f0-b616-42dde27851f2","_shadows.scss","34d4a442-fad2-11f0-b616-42dde27851f2",101,["D",1769444118319],".theme-scope {\n /* ===================================\n Shadow Tokens\n =================================== */\n\n /* Base Shadows */\n --shadow-none: none;\n --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n\n /* Component-Specific Shadows */\n --shadow-card: var(--shadow-md);\n --shadow-dropdown: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --shadow-toast: 0 5px 15px -3px rgba(0, 0, 0, 0.08);\n \n /* Focus Ring Sizes (used with color-*-ring variables) */\n --ring-width: 3px;\n --ring-offset: 0px;\n}\n\n",[],[152,153,949,959],"34c9d486-fad2-11f0-92fd-42dde27851f2","_radii.scss","34c9d526-fad2-11f0-92fd-42dde27851f2",100,["D",1769444118379],".theme-scope {\n /* ===================================\n Border Radius Tokens\n =================================== */\n\n --radius-none: 0;\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-lg: 0.5rem; /* 8px */\n --radius-xl: 0.75rem; /* 12px */\n --radius-2xl: 1rem; /* 16px */\n --radius-full: 9999px; /* Fully rounded */\n\n /* Component-Specific Radii */\n --radius-button: var(--radius-md);\n --radius-input: var(--radius-md);\n --radius-card: var(--radius-lg);\n --radius-badge: var(--radius-md);\n --radius-badge-pill: var(--radius-full);\n --radius-dropdown: var(--radius-md);\n --radius-tab: var(--radius-md);\n --radius-tab-modern: var(--radius-md);\n --radius-toast: var(--radius-lg);\n}\n\n",[],[152,153,949,967],"34ac9330-fad2-11f0-8a16-42dde27851f2","_index.scss","34ac93f8-fad2-11f0-8a16-42dde27851f2",97,["D",1769444118122],"/* ===================================\n Design Tokens Index\n Imports all token files to define CSS custom properties\n =================================== */\n\n@use 'colors';\n@use 'spacing';\n@use 'typography';\n@use 'radii';\n@use 'shadows';\n\n",[],[152,153,949,975],"34a24290-fad2-11f0-b487-42dde27851f2","_colors.scss","34a2433a-fad2-11f0-b487-42dde27851f2",96,["D",1769444118143],"/* ===================================\n Root-level Color Defaults (for components outside theme-scope)\n =================================== */\n:root {\n /* Light mode defaults */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f8fafc;\n --color-bg-muted: #f1f5f9;\n --color-border: #e2e8f0;\n --color-border-light: #cbd5e1;\n --color-text-primary: #0f172a;\n --color-text-muted: #94a3b8;\n --color-primary: #3b82f6;\n}\n\n/* Dark mode at root level */\n:root.dark,\n.dark {\n --color-bg-primary: #1e293b;\n --color-bg-secondary: #0f172a;\n --color-bg-muted: #334155;\n --color-border: #475569;\n --color-border-light: #334155;\n --color-text-primary: #f8fafc;\n --color-text-muted: #94a3b8;\n --color-primary: #60a5fa;\n}\n\n.theme-scope {\n /* ===================================\n Color Tokens\n =================================== */\n\n /* Text Colors */\n --color-text-primary: #0f172a;\n --color-text-secondary: oklch(21% 0.034 264.665);\n --color-text-muted: #94a3b8;\n --color-text-neutral: #475569;\n --color-text-neutral-dark: #334155;\n --color-text-disabled: #9ca3af; /* Readable disabled text color */\n\n /* Background Colors */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f8fafc;\n --color-bg-muted: #f1f5f9;\n --color-bg-light: #F3F4F6;\n --color-bg-disabled: #f1f5f9; /* Disabled background color */\n\n /* Border Colors */\n --color-border: #e2e8f0;\n --color-border-light: #cbd5e1;\n --color-border-tab: #e4e4e7;\n\n /* Primary Colors */\n --color-primary: #3b82f6;\n --color-primary-hover: #2563eb;\n --color-primary-active: #1d4ed8;\n --color-primary-dark: #1e40af;\n --color-primary-light: #eff6ff;\n --color-primary-lighter: #dbeafe;\n --color-primary-lightest: #bfdbfe;\n \n /* Primary Ring (for focus states) */\n --color-primary-ring: rgba(59, 130, 246, 0.3);\n \n /* Primary Text (text color on primary background) */\n --color-primary-text: #ffffff;\n\n /* Success Colors */\n --color-success: #10b981; /* Brighter, less dark green (emerald-500) */\n --color-success-light: #d1fae5; /* Lighter background */\n --color-success-dark: #047857; /* Darker for text on light bg */\n --color-success-link: #059669;\n --color-success-link-hover: #047857;\n \n /* Success Ring */\n --color-success-ring: rgba(34, 197, 94, 0.3);\n \n /* Success Text (text color on success background) */\n --color-success-text: #ffffff;\n \n /* Success Secondary Colors (for outlined buttons) */\n --color-success-200: #bbf7d0;\n --color-success-300: #86efac;\n\n /* Warning Colors */\n --color-warning: #f59e0b;\n --color-warning-light: #fef3c7;\n --color-warning-dark: #92400e;\n --color-warning-link: #d97706;\n --color-warning-link-hover: #b45309;\n \n /* Warning Ring */\n --color-warning-ring: rgba(245, 158, 11, 0.3);\n \n /* Warning Text (text color on warning background) */\n --color-warning-text: #ffffff;\n \n /* Warning Secondary Colors */\n --color-warning-200: #fde68a;\n --color-warning-300: #fcd34d;\n\n /* Danger Colors */\n --color-danger: #ef4444;\n --color-danger-light: #fee2e2;\n --color-danger-dark: #b91c1c;\n --color-danger-link: #dc2626;\n --color-danger-link-hover: #b91c1c;\n \n /* Danger Ring */\n --color-danger-ring: rgba(239, 68, 68, 0.3);\n \n /* Danger Text (text color on danger background) */\n --color-danger-text: #ffffff;\n \n /* Danger Secondary Colors */\n --color-danger-200: #fecaca;\n --color-danger-300: #fca5a5;\n\n /* Info Colors */\n --color-info: #0ea5e9;\n --color-info-light: #e0f2fe;\n --color-info-dark: #075985;\n --color-info-link: #0284c7;\n --color-info-link-hover: #0369a1;\n \n /* Info Ring */\n --color-info-ring: rgba(14, 165, 233, 0.3);\n \n /* Info Text (text color on info background) */\n --color-info-text: #ffffff;\n \n /* Info Secondary Colors */\n --color-info-200: #bae6fd;\n --color-info-300: #7dd3fc;\n\n /* Neutral Colors */\n --color-neutral: #71717a;\n --color-neutral-light: #f4f4f5;\n --color-neutral-dark: #3f3f46;\n --color-neutral-link: #52525b;\n --color-neutral-link-hover: #3f3f46;\n \n /* Neutral Ring */\n --color-neutral-ring: rgba(113, 113, 122, 0.3);\n \n /* Neutral Text (text color on neutral background) */\n --color-neutral-text: #ffffff;\n \n /* Neutral Secondary Colors */\n --color-neutral-200: #e4e4e7;\n --color-neutral-300: #d4d4d8;\n\n /* Code Colors - Light mode uses light gray background with strong text contrast */\n --color-code-bg: #f8fafc;\n --color-code-text: #be185d;\n --color-code-bg-dark: #f1f5f9;\n --color-code-text-dark: #334155;\n --color-code-header-bg: #e2e8f0;\n --color-code-border: #e2e8f0;\n \n /* Syntax highlighting colors for light mode - strong contrast */\n --color-syntax-keyword: #7c3aed;\n --color-syntax-string: #059669;\n --color-syntax-number: #0284c7;\n --color-syntax-function: #2563eb;\n --color-syntax-comment: #64748b;\n --color-syntax-property: #c2410c;\n --color-syntax-punctuation: #475569;\n\n /* Tab Colors */\n --color-tab: #71717a;\n --color-tab-active: #3b82f6;\n\n /* Utility Colors */\n --color-gray-300: #d1d5db;\n --color-gray-400: #9ca3af;\n --color-white: #ffffff;\n \n /* Gray Ring (for ghost buttons, etc.) */\n --color-gray-ring: rgba(161, 161, 170, 0.2);\n --color-gray-ring-dark: rgba(15, 23, 42, 0.1);\n \n /* Dark/Inverted Section Colors */\n --color-bg-dark: #0f172a;\n --color-text-on-dark: #ffffff;\n --color-text-on-dark-muted: rgba(255, 255, 255, 0.85);\n \n /* Accent Color (for CTAs, highlights) */\n --color-accent: #f59e0b;\n --color-accent-hover: #d97706;\n \n /* CTA Color */\n --color-cta: #3b82f6;\n --color-cta-hover: #2563eb;\n \n /* ===================================\n Form Controls (Checkbox, Radio, Toggle)\n =================================== */\n \n /* Unchecked state */\n --color-control-border: var(--color-border-light);\n --color-control-border-hover: var(--color-border);\n --color-control-bg: var(--color-bg-primary);\n --color-control-bg-hover: var(--color-bg-secondary);\n \n /* Checked state */\n --color-control-checked: var(--color-primary);\n --color-control-checked-hover: var(--color-primary-hover);\n --color-control-checked-border: var(--color-primary);\n --color-control-checkmark: #ffffff;\n \n /* Focus state */\n --color-control-ring: var(--color-primary-ring);\n \n /* Toggle-specific */\n --color-toggle-bg: var(--color-border);\n --color-toggle-bg-checked: var(--color-primary);\n --color-toggle-knob: #ffffff;\n \n /* ===================================\n Choice Card Colors\n =================================== */\n --color-choice-border: var(--color-border-light);\n --color-choice-border-hover: var(--color-border);\n --color-choice-border-checked: var(--color-primary);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--color-bg-secondary);\n --color-choice-bg-checked: rgba(59, 130, 246, 0.05);\n --color-choice-ring: var(--color-primary);\n}\n\n/* ===================================\n Dark Mode Colors\n Applied via .dark class on theme-scope or parent\n =================================== */\n\n.theme-scope.dark,\n.dark .theme-scope {\n /* ===================================\n Color Tokens - Dark Mode\n =================================== */\n\n /* Text Colors - inverted for dark backgrounds */\n --color-text-primary: #f8fafc;\n --color-text-secondary: #e2e8f0;\n --color-text-muted: #94a3b8;\n --color-text-neutral: #cbd5e1;\n --color-text-neutral-dark: #e2e8f0;\n --color-text-disabled: #64748b;\n\n /* Background Colors - dark variants */\n --color-bg-primary: #0f172a;\n --color-bg-secondary: #1e293b;\n --color-bg-muted: #334155;\n --color-bg-light: #1e293b;\n --color-bg-disabled: #1e293b;\n\n /* Border Colors - subtle on dark */\n --color-border: #334155;\n --color-border-light: #475569;\n --color-border-tab: #475569;\n\n /* Primary Colors - slightly brighter for dark mode visibility */\n --color-primary: #60a5fa;\n --color-primary-hover: #3b82f6;\n --color-primary-active: #2563eb;\n --color-primary-dark: #93c5fd;\n --color-primary-light: rgba(59, 130, 246, 0.15);\n --color-primary-lighter: rgba(59, 130, 246, 0.1);\n --color-primary-lightest: rgba(59, 130, 246, 0.05);\n \n /* Primary Ring (for focus states) */\n --color-primary-ring: rgba(96, 165, 250, 0.4);\n \n /* Primary Text (text color on primary background) */\n --color-primary-text: #0f172a;\n\n /* Success Colors - brighter for dark mode */\n --color-success: #34d399;\n --color-success-light: rgba(16, 185, 129, 0.15);\n --color-success-dark: #6ee7b7;\n --color-success-link: #34d399;\n --color-success-link-hover: #6ee7b7;\n --color-success-ring: rgba(52, 211, 153, 0.4);\n --color-success-text: #0f172a;\n --color-success-200: rgba(16, 185, 129, 0.2);\n --color-success-300: rgba(16, 185, 129, 0.3);\n\n /* Warning Colors */\n --color-warning: #fbbf24;\n --color-warning-light: rgba(245, 158, 11, 0.15);\n --color-warning-dark: #fcd34d;\n --color-warning-link: #fbbf24;\n --color-warning-link-hover: #fcd34d;\n --color-warning-ring: rgba(251, 191, 36, 0.4);\n --color-warning-text: #0f172a;\n --color-warning-200: rgba(245, 158, 11, 0.2);\n --color-warning-300: rgba(245, 158, 11, 0.3);\n\n /* Danger Colors */\n --color-danger: #f87171;\n --color-danger-light: rgba(239, 68, 68, 0.15);\n --color-danger-dark: #fca5a5;\n --color-danger-link: #f87171;\n --color-danger-link-hover: #fca5a5;\n --color-danger-ring: rgba(248, 113, 113, 0.4);\n --color-danger-text: #0f172a;\n --color-danger-200: rgba(239, 68, 68, 0.2);\n --color-danger-300: rgba(239, 68, 68, 0.3);\n\n /* Info Colors */\n --color-info: #38bdf8;\n --color-info-light: rgba(14, 165, 233, 0.15);\n --color-info-dark: #7dd3fc;\n --color-info-link: #38bdf8;\n --color-info-link-hover: #7dd3fc;\n --color-info-ring: rgba(56, 189, 248, 0.4);\n --color-info-text: #0f172a;\n --color-info-200: rgba(14, 165, 233, 0.2);\n --color-info-300: rgba(14, 165, 233, 0.3);\n\n /* Neutral Colors */\n --color-neutral: #a1a1aa;\n --color-neutral-light: rgba(113, 113, 122, 0.15);\n --color-neutral-dark: #d4d4d8;\n --color-neutral-link: #a1a1aa;\n --color-neutral-link-hover: #d4d4d8;\n --color-neutral-ring: rgba(161, 161, 170, 0.4);\n --color-neutral-text: #0f172a;\n --color-neutral-200: rgba(113, 113, 122, 0.2);\n --color-neutral-300: rgba(113, 113, 122, 0.3);\n\n /* Code Colors - Dark mode uses actual dark background */\n --color-code-bg: #1e293b;\n --color-code-text: #fb7185;\n --color-code-bg-dark: #1e293b;\n --color-code-text-dark: #e2e8f0;\n --color-code-header-bg: #334155;\n --color-code-border: #475569;\n\n /* Tab Colors */\n --color-tab: #94a3b8;\n --color-tab-active: #60a5fa;\n\n /* Utility Colors */\n --color-gray-300: #475569;\n --color-gray-400: #64748b;\n --color-white: #0f172a;\n \n /* Gray Ring (for ghost buttons, etc.) */\n --color-gray-ring: rgba(148, 163, 184, 0.25);\n --color-gray-ring-dark: rgba(248, 250, 252, 0.1);\n \n /* Dark/Inverted Section Colors (swap for dark mode) */\n --color-bg-dark: #f8fafc;\n --color-text-on-dark: #0f172a;\n --color-text-on-dark-muted: rgba(15, 23, 42, 0.85);\n \n /* Accent Color (for CTAs, highlights) */\n --color-accent: #fbbf24;\n --color-accent-hover: #f59e0b;\n \n /* CTA Color */\n --color-cta: #60a5fa;\n --color-cta-hover: #3b82f6;\n \n /* ===================================\n Form Controls - Dark Mode\n =================================== */\n \n /* Unchecked state */\n --color-control-border: var(--color-border);\n --color-control-border-hover: var(--color-border-light);\n --color-control-bg: var(--color-bg-secondary);\n --color-control-bg-hover: var(--color-bg-muted);\n \n /* Checked state */\n --color-control-checked: var(--color-primary);\n --color-control-checked-hover: var(--color-primary-hover);\n --color-control-checked-border: var(--color-primary);\n --color-control-checkmark: #0f172a;\n \n /* Toggle-specific */\n --color-toggle-bg: var(--color-border-light);\n --color-toggle-bg-checked: var(--color-primary);\n --color-toggle-knob: #0f172a;\n \n /* ===================================\n Choice Card Colors - Dark Mode\n =================================== */\n --color-choice-border: var(--color-border);\n --color-choice-border-hover: var(--color-border-light);\n --color-choice-border-checked: var(--color-primary);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--color-bg-muted);\n --color-choice-bg-checked: rgba(96, 165, 250, 0.1);\n --color-choice-ring: var(--color-primary);\n}\n\n",[],[152,153,949,983],"31741846-fad2-11f0-b5d3-42dde27851f2",20,["D",1769444112815],[589,590,591,592,593,594],[152,153,949],"3497cc0c-fad2-11f0-a989-42dde27851f2","3497cce8-fad2-11f0-a989-42dde27851f2","323f2cc0-fad2-11f0-b910-42dde27851f2",95,["D",1769444118070],"/* ===================================\n Startup Theme - \"The Institute\" Style\n Based on Brookings Institution style\n Font: Inter, Primary: #003A70, Accent: #FF9E1C\n =================================== */\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n --font-family-sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-family-serif: Georgia, Cambria, \"Times New Roman\", Times, serif;\n \n font-family: var(--font-family-sans);\n background-color: #ffffff;\n color: #222222;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n \n /* Institute Color Palette */\n --color-primary: #003A70;\n --color-primary-hover: #002855;\n --color-primary-active: #001a38;\n --color-primary-dark: #022A4E;\n \n --color-accent: #FF9E1C;\n --color-accent-hover: #e88d0b;\n \n --color-cta: #00649F; /* Specific CTA blue */\n --color-cta-hover: #FF9E1C;\n \n /* Text Colors */\n --color-text-primary: #222222;\n --color-text-secondary: #555555;\n --color-text-muted: #757575;\n --color-text-on-dark: #ffffff;\n --color-text-on-dark-muted: rgba(255,255,255,0.9);\n \n /* Backgrounds */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f5f5f5;\n --color-bg-muted: #f0f0f0;\n --color-bg-dark: #022A4E;\n \n /* Borders */\n --color-border: #e0e0e0;\n --color-border-light: #eeeeee;\n \n /* Radii - Squared off */\n --radius-sm: 0px;\n --radius-md: 0px;\n --radius-lg: 0px;\n --radius-button: 0px;\n --radius-card: 0px;\n \n /* Shadows */\n --shadow-card: 0 2px 8px rgba(0,0,0,0.08);\n --shadow-hover: 0 8px 16px rgba(0,0,0,0.12);\n \n /* ===================================\n Typography\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n font-family: var(--font-family-sans);\n font-weight: 700;\n color: var(--color-text-primary);\n letter-spacing: -0.02em;\n margin-top: 1.5em;\n margin-bottom: 0.75em;\n }\n \n h1, .text-h1 { \n font-size: 2.75rem; \n line-height: 1.1; \n font-weight: 800;\n }\n \n h2, .text-h2 { font-size: 2rem; line-height: 1.2; }\n h3, .text-h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; }\n \n /* Links */\n a, .link {\n color: var(--color-primary);\n text-decoration: none;\n font-weight: 600;\n transition: all 0.2s ease;\n \n &:hover {\n color: var(--color-accent);\n text-decoration: underline;\n }\n }\n \n /* ===================================\n Buttons\n =================================== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: var(--color-accent);\n color: var(--color-text-on-dark);\n text-decoration: none;\n }\n }\n \n .btn-secondary {\n background-color: transparent;\n color: var(--color-primary);\n border: 1px solid var(--color-primary);\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 0.7rem 1.5rem;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: var(--color-primary);\n color: var(--color-text-on-dark);\n text-decoration: none;\n }\n }\n \n .btn-cta {\n background-color: var(--color-cta);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 1rem 2rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: var(--color-accent);\n color: var(--color-text-on-dark);\n text-decoration: none;\n }\n }\n \n .btn-accent {\n background-color: var(--color-accent);\n color: #000000; /* Black text on orange */\n border: none;\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 0.875rem 1.5rem;\n font-size: 1rem;\n text-transform: none; /* Regular case, not uppercase */\n letter-spacing: normal;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: #e88d0b; /* Darker orange on hover */\n color: #000000;\n text-decoration: none;\n }\n }\n \n .btn-sm {\n padding: 0.5rem 1rem;\n font-size: 0.75rem;\n }\n \n /* ===================================\n Dark Section (Inverted)\n =================================== */\n .bg-dark {\n background-color: var(--color-bg-dark);\n color: var(--color-text-on-dark);\n \n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n color: var(--color-text-on-dark);\n }\n \n p {\n color: var(--color-text-on-dark-muted);\n }\n \n a:not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-accent) {\n color: var(--color-text-on-dark);\n \n &:hover {\n text-decoration: underline;\n }\n }\n }\n \n /* ===================================\n Cards\n =================================== */\n .card {\n background-color: var(--color-bg-primary);\n border: 1px solid transparent;\n padding: 0;\n transition: box-shadow 0.2s;\n }\n \n /* ===================================\n Forms\n =================================== */\n input[type=text], input[type=email] {\n border: 1px solid var(--color-border);\n border-radius: var(--radius-button);\n padding: 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n background-color: var(--color-bg-secondary);\n \n &:focus {\n background-color: var(--color-bg-primary);\n border-color: var(--color-primary);\n outline: none;\n }\n }\n \n /* ===================================\n Utility Classes\n =================================== */\n .text-accent { color: var(--color-accent); }\n .text-primary { color: var(--color-primary); }\n .text-on-dark { color: var(--color-text-on-dark); }\n .text-on-dark-muted { color: var(--color-text-on-dark-muted); }\n \n .bg-muted { background-color: var(--color-bg-muted); }\n .bg-secondary { background-color: var(--color-bg-secondary); }\n \n .border-accent { border-color: var(--color-accent); }\n .border-t-accent { border-top: 3px solid var(--color-accent); }\n \n /* Logo serif */\n .font-serif { font-family: var(--font-family-serif); }\n}\n",[],[152,153,154,1003,64],"startup","323f2b62-fad2-11f0-b910-42dde27851f2",28,["D",1769444114148],[587],[152,153,154,1003],"348a7994-fad2-11f0-9f1e-42dde27851f2","348a7a70-fad2-11f0-9f1e-42dde27851f2","322b1c30-fad2-11f0-b910-42dde27851f2",94,["D",1769444117956],"/* ===================================\n Retro Theme - Geocities/Win95 Style\n Full override bringing back that 90s web nostalgia!\n =================================== */\n\n/* Playground-specific overrides (outside theme-scope) */\n:root {\n --playground-bg: #000033;\n --playground-text: #ffff00;\n --playground-text-muted: #00ff00;\n --playground-surface: #000080;\n --playground-surface-hover: #000066;\n --playground-border: #00ff00;\n --playground-border-hover: #00ffff;\n --playground-radius: 0;\n --playground-focus-ring: rgba(0, 255, 0, 0.4);\n --playground-font: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n}\n\n/* Retro Animations */\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n@keyframes rainbow {\n 0% { color: #ff0000; }\n 17% { color: #ff8800; }\n 33% { color: #ffff00; }\n 50% { color: #00ff00; }\n 67% { color: #00ffff; }\n 83% { color: #ff00ff; }\n 100% { color: #ff0000; }\n}\n\n@keyframes marquee {\n 0% { transform: translateX(100%); }\n 100% { transform: translateX(-100%); }\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes glitch {\n 0%, 90%, 100% { transform: translate(0); }\n 91% { transform: translate(-2px, 1px); }\n 92% { transform: translate(2px, -1px); }\n 93% { transform: translate(-1px, -1px); }\n 94% { transform: translate(1px, 2px); }\n}\n\n@keyframes scanline {\n 0% { top: 0%; }\n 100% { top: 100%; }\n}\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n background-color: #000033;\n background-image: url('https://web.archive.org/web/20091027075046im_/http://geocities.com/Area51/Hollow/9880/starfield.gif');\n color: #ffff00;\n \n /* Retro Color Overrides */\n --color-primary: #00ff00;\n --color-primary-hover: #00cc00;\n --color-primary-active: #009900;\n --color-primary-dark: #006600;\n --color-primary-light: #000000;\n --color-primary-lighter: #003300;\n --color-primary-lightest: #001100;\n --color-primary-ring: rgba(0, 255, 0, 0.5);\n \n --color-text-primary: #ffff00;\n --color-text-secondary: #00ff00;\n --color-text-muted: #c0c0c0;\n \n --color-bg-primary: rgba(0, 0, 0, 0.8);\n --color-bg-secondary: #000080;\n --color-bg-muted: #000033;\n \n --color-border: #00ff00;\n --color-border-light: #00cc00;\n \n /* Semantic Colors - Neon Style */\n --color-success: #00ff00;\n --color-success-light: #003300;\n --color-success-dark: #00cc00;\n --color-warning: #ffff00;\n --color-warning-light: #333300;\n --color-danger: #ff0000;\n --color-danger-light: #330000;\n --color-info: #00ffff;\n --color-info-light: #003333;\n \n /* No rounded corners - it's the 90s! */\n --radius-sm: 0;\n --radius-md: 0;\n --radius-lg: 0;\n --radius-xl: 0;\n --radius-2xl: 0;\n --radius-button: 0;\n --radius-card: 0;\n --radius-full: 0;\n \n /* ===================================\n Typography - READABLE VERSION\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3,\n .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl {\n font-family: \"Impact\", \"Arial Black\", Gadget, sans-serif;\n color: #ff00ff; /* Hot pink - more visible */\n text-shadow: \n 2px 2px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000; /* Black outline for readability */\n }\n \n /* Section headings in module demos - make them stand out */\n .font-semibold, .font-bold {\n color: #00ffff;\n text-shadow: 1px 1px 0 #000;\n }\n \n h1, .text-h1 {\n font-size: 2.5rem;\n letter-spacing: 2px;\n }\n \n h2, .text-h2 {\n font-size: 1.75rem;\n }\n \n h3, .text-h3, .text-lg {\n font-size: 1.25rem;\n color: #00ffff; /* Cyan for h3 */\n }\n \n /* Regular paragraph text */\n p, .text-sm, .text-base {\n color: #ffff00;\n text-shadow: 1px 1px 0 #000;\n }\n \n a, .link {\n color: #00ff00;\n text-decoration: underline;\n text-shadow: 1px 1px 0 #000;\n \n &:hover {\n color: #ffff00;\n text-shadow: 0 0 10px #00ff00, 1px 1px 0 #000;\n }\n \n &:visited {\n color: #ff00ff;\n }\n }\n \n strong, b {\n color: #ff6600;\n text-shadow: 1px 1px 0 #000;\n }\n \n code:not(pre code), .code-inline {\n background-color: #000;\n color: #00ff00;\n border: 1px solid #00ff00;\n font-family: \"Courier New\", Courier, monospace;\n padding: 0.125rem 0.375rem;\n }\n \n pre, .code-block {\n background-color: #000;\n color: #00ff00;\n border: 2px solid #00ff00;\n font-family: \"Courier New\", Courier, monospace;\n padding: 1rem;\n }\n \n blockquote {\n border-left: 4px solid #00ff00;\n background: rgba(0, 0, 0, 0.5);\n color: #ffff00;\n padding: 1rem;\n font-style: italic;\n }\n \n hr {\n border: none;\n border-top: 2px dashed #00ff00;\n margin: 2rem 0;\n }\n \n /* ===================================\n Tailwind Utility Class Overrides\n These override common Tailwind classes used in modules\n =================================== */\n \n /* Background overrides */\n .bg-white,\n .bg-gray-50,\n .bg-gray-100 {\n background-color: #c0c0c0 !important;\n }\n \n .bg-gray-200,\n .bg-gray-300 {\n background-color: #a0a0a0 !important;\n }\n \n /* Text color overrides */\n .text-gray-900,\n .text-gray-800,\n .text-gray-700 {\n color: #000000 !important;\n text-shadow: none;\n }\n \n .text-gray-600,\n .text-gray-500 {\n color: #333333 !important;\n }\n \n .text-gray-400 {\n color: #666666 !important;\n }\n \n .text-blue-600,\n .text-blue-500 {\n color: #00ffff !important;\n text-shadow: 1px 1px 0 #000;\n }\n \n .text-green-500 {\n color: #00ff00 !important;\n }\n \n .text-red-500 {\n color: #ff0000 !important;\n }\n \n /* Border overrides */\n .border-gray-200,\n .border-gray-300 {\n border-color: #808080 !important;\n }\n \n .border-gray-100 {\n border-color: #a0a0a0 !important;\n }\n \n /* Rounded corners - remove them! */\n .rounded,\n .rounded-md,\n .rounded-lg,\n .rounded-xl,\n .rounded-2xl,\n .rounded-full {\n border-radius: 0 !important;\n }\n \n /* ===================================\n Cards - Windows 95 Style\n =================================== */\n .card, .app-card {\n background-color: #c0c0c0;\n border: 4px outset #ffffff;\n box-shadow: 4px 4px 0px #000;\n color: #000000;\n }\n \n .card-title, .app-title {\n font-family: \"Impact\", \"Arial Black\", sans-serif;\n color: #000080;\n text-shadow: none;\n text-align: left;\n animation: none; /* Remove blink - too annoying */\n background: linear-gradient(to right, #c0c0c0, #e0e0e0);\n border-bottom: 2px solid #808080;\n padding-bottom: 0.5rem;\n margin-bottom: 1rem;\n \n &::before {\n content: \"📁 \";\n }\n &::after {\n content: \"\";\n }\n }\n \n .app-card-content {\n background-color: #ffffff;\n border: 2px inset #808080;\n color: #000000;\n padding: 1rem;\n }\n \n /* ===================================\n Buttons - Win95 3D Style\n =================================== */\n .btn-primary, .action-btn {\n background-color: #c0c0c0 !important;\n color: #000000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n font-weight: bold;\n border: 3px outset #ffffff !important;\n /* Default button look (thick black border simulation) */\n box-shadow: inset 0 0 0 1px #000000 !important; \n text-transform: uppercase;\n \n &:hover {\n background-color: #dcdcdc !important;\n border: 3px outset #ffffff !important;\n }\n \n &:active {\n border: 3px inset #808080 !important;\n background-color: #a0a0a0 !important;\n box-shadow: none !important;\n }\n \n &:focus {\n outline: 1px dotted #000;\n outline-offset: -4px;\n }\n }\n \n .btn-secondary, .btn-gray {\n background-color: #c0c0c0 !important;\n color: #000000 !important;\n border: 3px outset #ffffff !important;\n box-shadow: none !important;\n \n &:hover {\n background-color: #d0d0d0 !important;\n }\n \n &:active {\n border: 3px inset #808080 !important;\n }\n }\n \n .btn-tertiary {\n background: #c0c0c0 !important;\n color: #000000 !important;\n border: 2px outset #ffffff !important;\n \n &:hover {\n background: #d0d0d0 !important;\n }\n }\n \n .btn-danger {\n background-color: #ff0000 !important;\n color: #ffffff !important;\n border: 3px outset #ff6666 !important;\n \n &:active {\n border: 3px inset #990000 !important;\n }\n }\n \n .btn-success {\n background-color: #00aa00 !important;\n color: #ffffff !important;\n border: 3px outset #66ff66 !important;\n \n &:active {\n border: 3px inset #009900 !important;\n }\n }\n \n /* Blue buttons from modules */\n [class*=\"bg-blue-600\"],\n [class*=\"bg-blue-700\"] {\n background-color: #000080 !important;\n border: 3px outset #0000cc !important;\n \n &:hover {\n background-color: #0000aa !important;\n }\n }\n \n /* ===================================\n Forms - Terminal/Hacker Style\n =================================== */\n input[type=text],\n input[type=email],\n input[type=password],\n input[type=number],\n input[type=url],\n input[type=search],\n input[type=tel],\n input[type=date],\n input[type=time],\n input[type=datetime-local],\n textarea,\n .form-input {\n background: #001100 !important; /* Very dark green instead of pure black */\n color: #00ff00 !important;\n border: 2px inset #00ff00 !important;\n font-family: \"Courier New\", Courier, monospace !important;\n caret-color: #00ff00;\n text-shadow: 0 0 1px #00ff00; /* Subtle glow effect */\n \n &::placeholder {\n color: #00aa00 !important; /* Brighter placeholder for visibility */\n text-shadow: none;\n }\n \n &:focus {\n border-color: #00ff00 !important;\n box-shadow: 0 0 10px #00ff00, inset 0 0 5px rgba(0, 255, 0, 0.3) !important;\n }\n }\n \n select, .form-select {\n background: #000 !important;\n color: #00ff00 !important;\n border: 2px inset #00ff00 !important;\n font-family: \"Courier New\", Courier, monospace !important;\n /* Fix dropdown arrow - single chevron */\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2300ff00'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 8px center !important;\n background-size: 16px !important;\n padding-right: 32px !important;\n }\n \n label, .form-label {\n color: #ffff00 !important; /* Yellow for better contrast */\n font-family: \"Courier New\", Courier, monospace !important;\n font-weight: bold;\n text-transform: uppercase;\n background: #000080;\n padding: 4px 8px;\n border: 2px outset #4040c0;\n display: inline-block;\n margin-bottom: 6px;\n text-shadow: 1px 1px 0 #000000;\n }\n \n input[type=checkbox],\n input[type=radio] {\n accent-color: #00ff00;\n border-color: #00ff00;\n }\n \n input[type=range],\n .form-range {\n accent-color: #00ff00;\n background: #003300;\n }\n \n /* Copy Button - Retro Style */\n .copy-button, .copy-button-copied {\n background: #000080 !important;\n color: #00ffff !important;\n border: 2px outset #4040c0 !important;\n font-family: \"Courier New\", Courier, monospace !important;\n \n &:hover {\n background: #0000a0 !important;\n color: #ffffff !important;\n }\n }\n \n .copy-button-copied {\n background: #008000 !important;\n color: #ffffff !important;\n border: 2px outset #00c000 !important;\n }\n\n /* Toggle - Retro Mechanical Switch */\n input[type=checkbox].form-toggle {\n appearance: none;\n -webkit-appearance: none;\n width: 48px;\n height: 24px;\n background: #000000;\n border: 2px inset #808080 !important;\n border-radius: 0 !important; /* Square corners */\n position: relative;\n cursor: pointer;\n outline: none;\n \n /* The sliding button (thumb) */\n &::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n background: #c0c0c0;\n border: 2px outset #ffffff;\n transition: left 0.1s steps(2); /* Choppy retro animation */\n }\n\n /* OFF State specific styling */\n &:not(:checked) {\n background: #330000; /* Dark red background */\n box-shadow: inset 2px 2px 4px #000;\n }\n\n /* ON State specific styling */\n &:checked {\n background: #003300; /* Dark green background */\n \n &::after {\n left: 26px; /* Move to right */\n background: #00ff00; /* Green LED look */\n border: 2px outset #ccffcc;\n box-shadow: 0 0 5px #00ff00; /* Glow */\n }\n }\n \n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n filter: grayscale(100%);\n }\n }\n \n /* ===================================\n Tables - Classic HTML Style\n =================================== */\n table, .app-table {\n border: 4px ridge #808080 !important;\n background: #ffffff !important;\n color: #000000 !important;\n font-family: \"Times New Roman\", Times, serif;\n }\n \n th {\n background: #000080 !important;\n color: #ffffff !important;\n font-weight: bold;\n border: 2px inset #0000cc !important;\n padding: 8px;\n }\n \n td {\n border: 1px solid #808080 !important;\n padding: 8px;\n background: #ffffff !important;\n color: #000000 !important;\n }\n \n tr:nth-child(even) td {\n background: #e0e0e0 !important;\n }\n \n /* ===================================\n Badges - Bevel Style\n =================================== */\n .badge,\n [class*=\"badge-\"] {\n border: 2px outset #ffffff !important;\n background: #c0c0c0 !important;\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n text-transform: uppercase;\n border-radius: 0 !important;\n }\n \n .badge-success {\n background: #00ff00 !important;\n border-color: #00cc00 !important;\n }\n \n .badge-danger {\n background: #ff0000 !important;\n color: #fff !important;\n border-color: #cc0000 !important;\n }\n \n .badge-warning {\n background: #ffff00 !important;\n border-color: #cccc00 !important;\n }\n \n .badge-info {\n background: #00ffff !important;\n border-color: #00cccc !important;\n }\n \n /* ===================================\n Tabs - Folder Style\n =================================== */\n .tabs-list {\n border-bottom: 2px solid #808080;\n }\n \n .tab-trigger {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n border-bottom: none !important;\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n margin-right: 2px;\n \n &:hover {\n background: #d0d0d0 !important;\n }\n \n &[data-state=\"active\"],\n &.active {\n background: #ffffff !important;\n border-bottom: 2px solid #ffffff !important;\n margin-bottom: -2px;\n z-index: 1;\n }\n }\n \n /* ===================================\n Accordions - Retro Toggle\n =================================== */\n .accordion-group {\n border: 2px solid #808080;\n background: #c0c0c0;\n }\n \n .accordion-item {\n border-bottom: 2px solid #808080;\n }\n \n .accordion-button {\n color: #000080;\n text-transform: uppercase;\n font-weight: bold;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n \n &:hover {\n background: #d0d0d0;\n }\n }\n \n .accordion-content-inner {\n color: #000000;\n background: #ffffff;\n }\n \n /* ===================================\n Callouts/Alerts - Neon Boxes\n =================================== */\n .callout, .alert {\n border: 3px double;\n background: #000;\n padding: 1rem;\n \n &.callout-info, &.alert-info {\n border-color: #00ffff;\n color: #00ffff;\n }\n \n &.callout-success, &.alert-success {\n border-color: #00ff00;\n color: #00ff00;\n }\n \n &.callout-warning, &.alert-warning {\n border-color: #ffff00;\n color: #ffff00;\n }\n \n &.callout-danger, &.alert-danger {\n border-color: #ff0000;\n color: #ff0000;\n }\n }\n \n /* ===================================\n Loading States - Retro Style\n =================================== */\n .loading-spinner,\n .animate-spin {\n border: 4px solid #0000ff !important;\n border-top: 4px solid #ff0000 !important;\n border-radius: 0 !important;\n animation: spin 0.5s linear infinite !important;\n }\n \n .loading-text {\n color: #ff00ff;\n font-weight: bold;\n text-transform: uppercase;\n animation: blink 0.5s infinite;\n }\n \n /* Skeleton loading - make it retro */\n .animate-pulse,\n [class*=\"skeleton\"] {\n background: repeating-linear-gradient(\n 90deg,\n #000080 0px,\n #0000aa 10px,\n #000080 20px\n ) !important;\n animation: none !important;\n }\n \n /* ===================================\n Dropdowns - Win95 Menu\n =================================== */\n .dropdown-menu {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n box-shadow: 4px 4px 0 #000 !important;\n color: #000 !important;\n border-radius: 0 !important;\n }\n \n .dropdown-item {\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n border-radius: 0 !important;\n \n &:hover {\n background: #000080 !important;\n color: #ffffff !important;\n }\n \n &:active {\n background: #000060 !important;\n }\n }\n \n .dropdown-header {\n color: #808080 !important;\n font-weight: bold;\n text-transform: uppercase;\n font-size: 0.75rem;\n }\n \n .dropdown-divider {\n border-color: #808080 !important;\n }\n \n /* ===================================\n Toast Notifications\n =================================== */\n .toast {\n background: #c0c0c0 !important;\n border: 3px outset #ffffff !important;\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n box-shadow: 4px 4px 0 #000 !important;\n border-radius: 0 !important;\n }\n \n /* ===================================\n Avatar - Pixelated!\n =================================== */\n .avatar {\n border: 2px solid #00ff00 !important;\n image-rendering: pixelated;\n background: #000080 !important;\n border-radius: 0 !important;\n }\n \n /* ===================================\n Icons - Make them retro\n =================================== */\n .iconify {\n filter: none; /* Could add pixelation effect */\n }\n \n /* ===================================\n Kbd / Keyboard keys\n =================================== */\n kbd, .kbd {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n color: #000 !important;\n font-family: \"MS Sans Serif\", Tahoma, sans-serif !important;\n border-radius: 0 !important;\n box-shadow: 2px 2px 0 #808080 !important;\n }\n \n /* ===================================\n Toggle Groups\n =================================== */\n .toggle-group {\n border: 2px solid #808080;\n background: #c0c0c0;\n }\n \n .toggle-group-item {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n color: #000 !important;\n \n &:hover {\n background: #d0d0d0 !important;\n }\n \n &[data-state=\"on\"],\n &.active {\n background: #ffffff !important;\n border: 2px inset #808080 !important;\n }\n }\n \n /* ===================================\n Page Sections from Modules\n =================================== */\n \n /* Override header styling */\n header {\n background: #c0c0c0;\n border-bottom: 2px solid #808080;\n }\n \n /* Hero sections */\n section {\n background: #c0c0c0;\n }\n \n /* Footer */\n footer {\n background: #c0c0c0;\n border-top: 2px solid #808080;\n }\n \n /* ===================================\n Fun Extras - Easter Eggs\n =================================== */\n \n /* Visitor Counter Style */\n .visitor-counter {\n font-family: \"Courier New\", Courier, monospace;\n background: #000;\n color: #00ff00;\n border: 2px inset #333;\n padding: 0.25rem 0.5rem;\n display: inline-block;\n }\n \n /* Under Construction Banner */\n .under-construction {\n background: repeating-linear-gradient(\n 45deg,\n #ffff00,\n #ffff00 10px,\n #000 10px,\n #000 20px\n );\n padding: 0.5rem;\n text-align: center;\n font-weight: bold;\n color: #000;\n animation: glitch 2s infinite;\n }\n \n /* Marquee Text Effect */\n .marquee {\n overflow: hidden;\n white-space: nowrap;\n \n span {\n display: inline-block;\n animation: marquee 10s linear infinite;\n }\n }\n \n /* Rainbow Text */\n .rainbow-text {\n animation: rainbow 2s infinite linear;\n font-weight: bold;\n }\n \n /* Guestbook Style Comment Box */\n .guestbook {\n background: #ffffff;\n color: #000;\n border: 4px ridge #c0c0c0;\n padding: 1rem;\n font-family: \"Comic Sans MS\", cursive;\n \n .guestbook-entry {\n border-bottom: 1px dashed #808080;\n padding: 0.5rem 0;\n \n .guestbook-author {\n color: #0000ff;\n font-weight: bold;\n }\n \n .guestbook-date {\n color: #808080;\n font-size: 0.75rem;\n }\n }\n }\n \n /* Hit Counter */\n .hit-counter {\n background: #000;\n color: #ff0000;\n font-family: \"Courier New\", monospace;\n border: 2px inset #333;\n padding: 0.25rem 0.5rem;\n letter-spacing: 0.1em;\n \n &::before {\n content: \"Hits: \";\n color: #00ff00;\n }\n }\n \n /* Webring Navigation */\n .webring {\n text-align: center;\n padding: 0.5rem;\n border: 2px ridge #c0c0c0;\n background: #000;\n \n a {\n color: #00ff00;\n margin: 0 0.5rem;\n \n &:hover {\n color: #ffff00;\n }\n }\n }\n \n /* CRT Scanline Effect (optional - add to containers) */\n .crt-effect {\n position: relative;\n \n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.1) 0px,\n rgba(0, 0, 0, 0.1) 1px,\n transparent 1px,\n transparent 2px\n );\n pointer-events: none;\n }\n }\n}\n",[],[152,153,154,1017,64],"retro","322b1b5e-fad2-11f0-b910-42dde27851f2",27,["D",1769444114015],[585],[152,153,154,1017],"3344c44a-fad2-11f0-b487-42dde27851f2","3344c4f4-fad2-11f0-b487-42dde27851f2","31c54040-fad2-11f0-a7d7-42dde27851f2",59,["D",1769444115863],"/* ===================================\n Luma Theme - Event Platform Style\n Based on Lu.ma's clean, modern event platform aesthetic\n Font: System UI, Primary: Dark, Accent: Coral Red\n =================================== */\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n --font-family-sans: -apple-system, \"system-ui\", Inter, Roboto, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n \n font-family: var(--font-family-sans);\n background-color: #ffffff;\n color: #131517;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n \n /* ===================================\n Luma Color Palette\n =================================== */\n \n /* Primary = Dark/Black (main buttons, text) */\n --color-primary: #131517;\n --color-primary-hover: #2a2d30;\n --color-primary-active: #0a0b0c;\n --color-primary-dark: #000000;\n --color-primary-light: #f7f8f9;\n --color-primary-lighter: #f1f5f9;\n --color-primary-lightest: #e2e8f0;\n --color-primary-ring: rgba(19, 21, 23, 0.2);\n \n /* Accent = Luma Coral/Red (CTAs, highlights, brand) */\n --color-accent: #e54d2e;\n --color-accent-hover: #d4401f;\n --color-accent-light: #ff6b4a;\n \n /* CTA uses the accent color */\n --color-cta: #e54d2e;\n --color-cta-hover: #d4401f;\n \n /* Text Colors */\n --color-text-primary: #131517;\n --color-text-secondary: rgba(19, 21, 23, 0.64);\n --color-text-muted: #94a3b8;\n --color-text-neutral: #475569;\n --color-text-neutral-dark: #334155;\n --color-text-on-dark: #ffffff;\n --color-text-on-dark-muted: rgba(255, 255, 255, 0.85);\n \n /* Backgrounds */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f8fafc;\n --color-bg-muted: #f1f5f9;\n --color-bg-light: #f7f8f9;\n --color-bg-dark: #131517;\n --color-bg-hover: #e2e8f0;\n \n /* Borders */\n --color-border: #e2e8f0;\n --color-border-light: #f1f5f9;\n --color-border-tab: #e4e4e7;\n \n /* Semantic Colors */\n --color-success: #22c55e;\n --color-success-light: #dcfce7;\n --color-success-dark: #166534;\n \n --color-warning: #f59e0b;\n --color-warning-light: #fef3c7;\n --color-warning-dark: #92400e;\n \n --color-danger: #ef4444;\n --color-danger-light: #fee2e2;\n --color-danger-dark: #b91c1c;\n \n --color-info: #0ea5e9;\n --color-info-light: #e0f2fe;\n --color-info-dark: #075985;\n \n /* Utility Colors */\n --color-white: #ffffff;\n --color-gray-300: #d1d5db;\n --color-gray-400: #9ca3af;\n \n /* ===================================\n Border Radius - Luma uses generous rounding\n =================================== */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.5rem; /* 8px */\n --radius-lg: 0.75rem; /* 12px */\n --radius-xl: 1rem; /* 16px */\n --radius-2xl: 1.25rem; /* 20px */\n --radius-full: 9999px;\n \n /* Component-specific radii */\n --radius-button: 0.75rem; /* 12px - Luma uses larger button radii */\n --radius-input: 0.75rem; /* 12px */\n --radius-card: 0.75rem; /* 12px */\n --radius-badge: 9999px; /* Pill badges */\n --radius-dropdown: 0.5rem; /* 8px */\n --radius-tab: 0.5rem; /* 8px */\n --radius-toast: 0.75rem; /* 12px */\n \n /* ===================================\n Shadows - Soft and subtle\n =================================== */\n --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);\n --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);\n --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.2);\n --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);\n --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);\n --shadow-toast: 0 8px 32px rgba(0, 0, 0, 0.12);\n \n /* ===================================\n Typography\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n font-family: var(--font-family-sans);\n font-weight: 600;\n color: var(--color-text-primary);\n letter-spacing: -0.02em;\n line-height: 1.2;\n }\n \n h1, .text-h1 { \n font-size: 2.5rem; \n font-weight: 700;\n }\n \n h2, .text-h2 { \n font-size: 1.875rem; \n font-weight: 700;\n }\n \n h3, .text-h3 { \n font-size: 1.25rem; \n font-weight: 600;\n }\n \n /* Links - subtle, no underline by default */\n a, .link {\n color: var(--color-text-primary);\n text-decoration: none;\n transition: color 0.2s ease;\n \n &:hover {\n color: var(--color-text-neutral);\n text-decoration: none;\n }\n }\n \n /* ===================================\n Buttons - Luma Style\n =================================== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-primary-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n \n &:active {\n transform: translateY(0);\n }\n }\n \n .btn-secondary {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-hover);\n }\n }\n \n .btn-tertiary {\n background-color: transparent;\n color: var(--color-text-neutral);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n .btn-ghost {\n background-color: transparent;\n color: var(--color-text-muted);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.5rem 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-neutral);\n }\n }\n \n /* Accent button (uses Luma coral) */\n .btn-accent, .btn-cta {\n background-color: var(--color-accent);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n padding: 0.875rem 1.5rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-accent-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n }\n \n .btn-danger {\n background-color: var(--color-danger);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-danger-dark);\n }\n }\n \n .btn-success {\n background-color: var(--color-success);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-success-dark);\n }\n }\n \n /* ===================================\n Cards - Clean with subtle shadow\n =================================== */\n .card {\n background-color: var(--color-bg-primary);\n border: none;\n border-radius: var(--radius-card);\n box-shadow: var(--shadow-card);\n transition: box-shadow 0.2s ease;\n \n &:hover {\n box-shadow: var(--shadow-md);\n }\n }\n \n .card-title {\n font-weight: 600;\n color: var(--color-text-primary);\n font-size: 1.125rem;\n }\n \n /* ===================================\n Forms - Rounded, clean inputs\n =================================== */\n input[type=text],\n input[type=email],\n input[type=password],\n input[type=number],\n input[type=url],\n input[type=search],\n input[type=tel],\n textarea,\n .form-input {\n background-color: var(--color-bg-muted);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n transition: all 0.2s ease;\n \n &::placeholder {\n color: var(--color-text-muted);\n }\n \n &:focus {\n background-color: var(--color-bg-primary);\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n select, .form-select {\n background-color: var(--color-bg-muted);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n \n &:focus {\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n label, .form-label {\n color: var(--color-text-primary);\n font-weight: 600;\n font-size: 0.875rem;\n margin-bottom: 0.5rem;\n display: block;\n }\n \n /* ===================================\n Badges - Pill style\n =================================== */\n .badge {\n border-radius: var(--radius-badge);\n font-weight: 600;\n font-size: 0.75rem;\n padding: 0.25rem 0.75rem;\n }\n \n .badge-success {\n background-color: var(--color-success-light);\n color: var(--color-success-dark);\n }\n \n .badge-danger {\n background-color: var(--color-danger-light);\n color: var(--color-danger-dark);\n }\n \n .badge-warning {\n background-color: var(--color-warning-light);\n color: var(--color-warning-dark);\n }\n \n .badge-info {\n background-color: var(--color-info-light);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Tabs - Rounded pill style\n =================================== */\n .tabs-list {\n background-color: var(--color-bg-muted);\n border-radius: var(--radius-lg);\n padding: 0.25rem;\n }\n \n .tab-trigger {\n border-radius: var(--radius-md);\n font-weight: 500;\n color: var(--color-text-muted);\n background: transparent;\n border: none;\n padding: 0.5rem 1rem;\n transition: all 0.15s ease;\n \n &:hover:not(.active):not([data-state=\"active\"]) {\n color: var(--color-text-primary);\n background-color: rgba(0, 0, 0, 0.03);\n }\n \n &.active,\n &[data-state=\"active\"] {\n background-color: var(--color-bg-primary);\n color: var(--color-text-primary);\n box-shadow: var(--shadow-sm);\n }\n }\n \n /* ===================================\n Dropdowns - Clean and rounded\n =================================== */\n .dropdown-menu {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-dropdown);\n box-shadow: var(--shadow-dropdown);\n padding: 0.25rem;\n }\n \n .dropdown-item {\n border-radius: var(--radius-md);\n color: var(--color-text-neutral);\n font-weight: 500;\n padding: 0.5rem 0.75rem;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n /* ===================================\n Alerts/Callouts\n =================================== */\n .alert, .callout {\n border-radius: var(--radius-lg);\n padding: 1rem 1.25rem;\n border: none;\n }\n \n .alert-success, .callout-success {\n background-color: var(--color-success-light);\n color: var(--color-success-dark);\n }\n \n .alert-danger, .callout-danger, .alert-destructive {\n background-color: var(--color-danger-light);\n color: var(--color-danger-dark);\n }\n \n .alert-warning, .callout-warning {\n background-color: var(--color-warning-light);\n color: var(--color-warning-dark);\n }\n \n .alert-info, .callout-info {\n background-color: var(--color-info-light);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Toast\n =================================== */\n .toast {\n background-color: var(--color-bg-primary);\n border-radius: var(--radius-toast);\n box-shadow: var(--shadow-toast);\n border: 1px solid var(--color-border);\n }\n \n /* ===================================\n Avatars - Circular\n =================================== */\n .avatar {\n border-radius: var(--radius-full);\n border: 2px solid var(--color-bg-primary);\n box-shadow: var(--shadow-sm);\n }\n \n /* ===================================\n Tables - Clean lines\n =================================== */\n table {\n border-radius: var(--radius-lg);\n overflow: hidden;\n }\n \n th {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n font-weight: 600;\n border-bottom: 1px solid var(--color-border);\n }\n \n td {\n border-bottom: 1px solid var(--color-border);\n }\n \n tr:last-child td {\n border-bottom: none;\n }\n \n /* ===================================\n Accordions\n =================================== */\n .accordion-group {\n border-radius: var(--radius-lg);\n // border: 1px solid var(--color-border);\n overflow: hidden;\n }\n \n .accordion-button {\n font-weight: 600;\n color: var(--color-text-primary);\n \n &:hover {\n background-color: var(--color-bg-muted);\n }\n }\n \n /* ===================================\n Toggle Groups\n =================================== */\n .toggle-group {\n background-color: var(--color-bg-muted);\n border-radius: var(--radius-lg);\n padding: 0.25rem;\n }\n \n .toggle-group-item {\n border-radius: var(--radius-md);\n color: var(--color-text-muted);\n font-weight: 500;\n \n &:hover:not(.active):not([data-state=\"on\"]) {\n color: var(--color-text-primary);\n }\n \n &.active,\n &[data-state=\"on\"] {\n background-color: var(--color-bg-primary);\n color: var(--color-text-primary);\n box-shadow: var(--shadow-sm);\n }\n }\n \n /* ===================================\n Utility Classes\n =================================== */\n .text-accent { color: var(--color-accent); }\n .text-primary { color: var(--color-text-primary); }\n .text-muted { color: var(--color-text-muted); }\n .text-on-dark { color: var(--color-text-on-dark); }\n \n .bg-muted { background-color: var(--color-bg-muted); }\n .bg-secondary { background-color: var(--color-bg-secondary); }\n .bg-dark { \n background-color: var(--color-bg-dark); \n color: var(--color-text-on-dark);\n }\n \n .border-accent { border-color: var(--color-accent); }\n}\n\n",[],[152,153,154,1031,64],"luma","31c53fa0-fad2-11f0-a7d7-42dde27851f2",23,["D",1769444113329],[583],[152,153,154,1031],"3393c43c-fad2-11f0-b487-42dde27851f2","3393c504-fad2-11f0-b487-42dde27851f2","31f7f36e-fad2-11f0-b76d-42dde27851f2",70,["D",1769444116052],"/* ===================================\n Groq Theme - Fast AI Inference Platform Style\n Based on Groq's vibrant orange and modern tech aesthetic\n Font: System UI (app), Space Grotesk (marketing), IBM Plex Mono (code)\n Primary: Orange (#f43e01), Core: Black/White/Grays\n =================================== */\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n \n /* Typography - Groq uses IBM Plex Mono for code */\n --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;\n \n /* Marketing fonts - Space Grotesk for landing pages, hero sections, marketing copy */\n --font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;\n --font-marketing: 'Space Grotesk', -apple-system, system-ui, sans-serif;\n \n /* System UI for app interfaces (default) */\n --font-sans: -apple-system, system-ui, Inter, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;\n \n font-family: var(--font-sans);\n background-color: #ffffff;\n color: #2d2f33; /* groq-gray-800 - Primary text */\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n \n /* ===================================\n IBM Plex Mono Font Weight Override\n =================================== */\n /* Apply light weight (300) to all monospace elements */\n .font-mono,\n code, pre, kbd, samp, tt,\n input[style*=\"font-mono\"],\n textarea[style*=\"font-mono\"],\n [style*=\"font-family: var(--font-mono\"],\n *[style*=\"var(--font-mono\"] {\n font-weight: 400 !important; // plex is too harsh at 400\n }\n \n /* ===================================\n Groq Core Color Palette\n Base colors from the provided palette\n =================================== */\n \n /* Core Oranges (Primary Brand Colors) - Full Scale */\n --groq-orange-50: #fff5e5;\n --groq-orange-100: #ffe8cc;\n --groq-orange-200: #ffd1a3;\n --groq-orange-300: #ffb973;\n --groq-orange-400: #fe9e20;\n --groq-orange-500: #f48b0a;\n --groq-orange-600: #f43e01; /* Primary Brand Color */\n --groq-orange-700: #c23101;\n --groq-orange-800: #9a2701;\n --groq-orange-900: #731d00;\n --groq-orange-950: #4d1300;\n \n /* Core Grays (Neutral Palette) - matches original Groq brand */\n --groq-gray-50: #f9f9f8; /* Lightest background */\n --groq-gray-100: #f3f3ee; /* Nav bg, lighter section bg */\n --groq-gray-200: #e8e8e0; /* Hover states */\n --groq-gray-300: #cecebf; /* Borders */\n --groq-gray-400: #9f9f92; /* Muted elements */\n --groq-gray-500: #69695d; /* Secondary text */\n --groq-gray-600: #4e4e45; /* Darker text */\n --groq-gray-700: #2d2f33; /* Card text, secondary text */\n --groq-gray-800: #26292e; /* Primary text */\n --groq-gray-900: #1a1c1f; /* Dark bg */\n --groq-gray-950: #0f1011; /* Darkest */\n \n /* Pure Black & White */\n --groq-black: #000000;\n --groq-white: #ffffff;\n \n /* ===================================\n Groq Extended Color Palette\n Additional colors for variety\n =================================== */\n \n /* Yellow Tones - Full Scale */\n --groq-yellow-50: #fffef0;\n --groq-yellow-100: #fefdc0;\n --groq-yellow-200: #f4fd90;\n --groq-yellow-300: #fdeb20;\n --groq-yellow-400: #f0dc00;\n --groq-yellow-500: #e6d000;\n --groq-yellow-600: #d4be00;\n --groq-yellow-700: #c6b802;\n --groq-yellow-800: #9a8f02;\n --groq-yellow-900: #706801;\n --groq-yellow-950: #4a4501;\n \n /* Green Tones - Full Scale */\n --groq-green-50: #e8fff5;\n --groq-green-100: #c5ffea;\n --groq-green-200: #a9ffdb;\n --groq-green-300: #10e68d;\n --groq-green-400: #0dd97f;\n --groq-green-500: #0dcc7a;\n --groq-green-600: #0aab66;\n --groq-green-700: #018b01;\n --groq-green-800: #016b01;\n --groq-green-900: #015001;\n --groq-green-950: #003500;\n \n /* Gold Tones */\n --groq-gold-300: #c6b802;\n \n /* Blue Tones - Full Scale */\n --groq-blue-50: #e8f6ff;\n --groq-blue-100: #d0edfe;\n --groq-blue-200: #bfe4fc;\n --groq-blue-300: #5fc0ff;\n --groq-blue-400: #30a8f0;\n --groq-blue-500: #0082a0;\n --groq-blue-600: #006d87;\n --groq-blue-700: #005870;\n --groq-blue-800: #004559;\n --groq-blue-900: #003445;\n --groq-blue-950: #002330;\n \n /* Purple Tones - Full Scale */\n --groq-purple-50: #f8f5fd;\n --groq-purple-100: #f0eafb;\n --groq-purple-200: #e3dcf8;\n --groq-purple-300: #d377fd;\n --groq-purple-400: #b85ce8;\n --groq-purple-500: #683d7f;\n --groq-purple-600: #56326a;\n --groq-purple-700: #452856;\n --groq-purple-800: #351e43;\n --groq-purple-900: #261530;\n --groq-purple-950: #180d1f;\n \n /* Pink Tones - Full Scale */\n --groq-pink-50: #fff5fd;\n --groq-pink-100: #feeafc;\n --groq-pink-200: #fad8ff;\n --groq-pink-300: #f392dd;\n --groq-pink-400: #f07cd5;\n --groq-pink-500: #ee66ce;\n --groq-pink-600: #d450b5;\n --groq-pink-700: #b03c97;\n --groq-pink-800: #8c2f78;\n --groq-pink-900: #68235a;\n --groq-pink-950: #45173c;\n \n /* ===================================\n Semantic Color Mapping\n =================================== */\n \n /* Primary = Groq Orange 600 (main brand color) */\n --color-primary: var(--groq-orange-600);\n --color-primary-hover: var(--groq-orange-700);\n --color-primary-active: var(--groq-orange-800);\n --color-primary-dark: var(--groq-orange-800);\n --color-primary-light: var(--groq-orange-200);\n --color-primary-lighter: var(--groq-orange-100);\n --color-primary-lightest: var(--groq-orange-50);\n --color-primary-ring: rgba(244, 62, 1, 0.2);\n \n /* Accent = Lighter Orange for variety */\n --color-accent: var(--groq-orange-400);\n --color-accent-hover: var(--groq-orange-600);\n --color-accent-light: var(--groq-orange-300);\n \n /* CTA uses main brand color */\n --color-cta: var(--groq-orange-600);\n --color-cta-hover: var(--groq-orange-700);\n \n /* Text Colors */\n --color-text-primary: var(--groq-gray-800); /* #2d2f33 - Main body text */\n --color-text-secondary: var(--groq-gray-700); /* #655852 - Card text */\n --color-text-muted: var(--groq-gray-600); /* #766f6b - Nav text, lighter */\n --color-text-neutral: var(--groq-gray-700);\n --color-text-neutral-dark: var(--groq-gray-950); /* #1e1e1e - Darkest text */\n --color-text-on-dark: var(--groq-gray-50); /* #fefefe - Light text on dark bg */\n --color-text-on-dark-muted: rgba(206, 206, 191, 0.85);\n \n /* ===================================\n Background Colors\n Console (App) and Marketing variations\n =================================== */\n \n /* Base backgrounds */\n --color-bg-primary: var(--groq-white); /* #ffffff - Pure white */\n --color-bg-secondary: var(--groq-gray-200); /* #fefefe - Card background */\n --color-bg-muted: var(--groq-gray-100); /* #fafafa - Console page bg */\n --color-bg-light: var(--groq-gray-100); /* #fafafa - Light sections */\n --color-bg-dark: var(--groq-gray-900); /* #272b2c - Dark bg */\n --color-bg-hover: var(--groq-gray-200); /* #f3f3ee - Hover state */\n \n /* Console (App) backgrounds */\n --color-bg-card: var(--groq-gray-50); /* #fefefe - White cards */\n --color-bg-page: var(--groq-gray-100); /* #fafafa - Console page bg */\n \n /* Marketing backgrounds */\n --color-bg-nav: var(--groq-gray-200); /* #f3f3ee - Nav background */\n --color-bg-hero: var(--groq-gray-300); /* #edede5 - Hero sections */\n --color-bg-section: var(--groq-gray-200); /* #f3f3ee - Light sections */\n --color-bg-section-alt: var(--groq-gray-400); /* #e8e8de - Gray cards */\n \n /* Borders */\n --color-border: var(--groq-gray-400); /* #e8e8de - Default border */\n --color-border-light: var(--groq-gray-500); /* #cecebf - Light border */\n --color-border-tab: var(--groq-gray-500);\n \n /* Semantic Colors */\n --color-success: #22c55e;\n --color-success-light: #dcfce7;\n --color-success-dark: #166534;\n --color-success-text: var(--groq-green-50); /* light green text on darkish green for better contrast */\n \n --color-warning: #f59e0b;\n --color-warning-light: #fef3c7;\n --color-warning-dark: #92400e;\n --color-warning-text: #ffffff;\n \n --color-danger: #ef4444;\n --color-danger-light: #fee2e2;\n --color-danger-dark: #b91c1c;\n --color-danger-text: #ffffff;\n \n --color-info: #0ea5e9;\n --color-info-light: #e0f2fe;\n --color-info-dark: #075985;\n --color-info-text: #ffffff;\n \n --color-neutral-text: #ffffff;\n \n /* Primary text (on primary background) */\n --color-primary-text: var(--color-text-on-dark);\n \n /* Utility Colors */\n --color-white: var(--groq-white);\n --color-gray-300: var(--groq-gray-300);\n --color-gray-400: var(--groq-gray-400);\n \n /* Form Controls (Checkbox, Radio, Toggle) */\n --color-control-border: var(--color-border);\n --color-control-border-hover: var(--groq-orange-400);\n --color-control-bg: var(--color-bg-primary);\n --color-control-bg-hover: var(--groq-orange-50, #fff5e5);\n --color-control-checked: var(--groq-orange-600);\n --color-control-checked-hover: var(--groq-orange-700);\n --color-control-checked-border: var(--groq-orange-600);\n --color-control-checkmark: #ffffff;\n --color-control-ring: rgba(244, 62, 1, 0.15);\n --color-toggle-bg: var(--groq-gray-500);\n --color-toggle-bg-checked: var(--groq-orange-600);\n --color-toggle-knob: #ffffff;\n \n /* Choice Card Colors */\n --color-choice-border: var(--color-border);\n --color-choice-border-hover: var(--groq-orange-400);\n --color-choice-border-checked: var(--groq-orange-600);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--color-bg-hover);\n --color-choice-bg-checked: rgba(244, 62, 1, 0.03);\n --color-choice-ring: var(--groq-orange-600);\n \n /* ===================================\n Border Radius - Modern, slightly rounded\n =================================== */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-md: 0.5rem; /* 8px */\n --radius-xl: 0.75rem; /* 12px */\n --radius-2xl: 1rem; /* 16px */\n --radius-full: 9999px;\n \n /* Component-specific radii */\n --radius-button: 0.5rem; /* 8px - Modern, clean buttons */\n --radius-input: 0.375rem; /* 6px */\n --radius-card: 0.5rem; /* 8px */\n --radius-badge: 0.25rem; /* 4px - Subtle rounded badges */\n --radius-dropdown: 0.5rem; /* 8px */\n --radius-tab: 0.375rem; /* 6px */\n --radius-toast: 0.5rem; /* 8px */\n \n /* ===================================\n Shadows - Sharp and modern\n =================================== */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);\n --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);\n --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\n --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);\n --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);\n --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.1);\n --shadow-toast: 0 10px 15px rgba(0, 0, 0, 0.1);\n \n /* ===================================\n Typography\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n font-family: var(--font-family-sans);\n font-weight: 700;\n color: var(--color-text-primary);\n letter-spacing: -0.025em;\n line-height: 1.2;\n }\n \n h1, .text-h1 { \n font-size: 2.5rem; \n font-weight: 800;\n }\n \n h2, .text-h2 { \n font-size: 1.875rem; \n font-weight: 700;\n }\n \n h3, .text-h3 { \n font-size: 1.25rem; \n font-weight: 600;\n }\n \n /* Links - Groq orange */\n a, .link {\n color: var(--color-primary);\n text-decoration: none;\n transition: color 0.2s ease;\n \n &:hover {\n color: var(--color-primary-hover);\n text-decoration: none;\n }\n }\n \n /* ===================================\n Buttons - Groq Style\n =================================== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-primary-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n // padding: 0.75rem 1.5rem;\n /* font-size inherited from base --text-button variable */\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-primary-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n \n &:active {\n transform: translateY(0);\n }\n }\n \n .btn-secondary {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-button);\n font-weight: 500;\n // padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-hover);\n border-color: var(--groq-orange-600);\n color: var(--groq-orange-600);\n }\n }\n \n .btn-tertiary {\n background-color: transparent;\n color: var(--color-text-neutral);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n // padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n .btn-ghost {\n background-color: transparent;\n color: var(--color-text-muted);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.5rem 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-neutral);\n }\n }\n \n /* Accent button (uses bright orange) */\n .btn-accent, .btn-cta {\n background-color: var(--color-accent);\n color: var(--color-primary-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n padding: 0.875rem 1.5rem;\n /* font-size inherited from base --text-button variable */\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-accent-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n }\n \n .btn-danger {\n background-color: var(--color-danger);\n color: var(--color-danger-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-danger-dark);\n }\n }\n \n .btn-success {\n background-color: var(--color-success);\n color: var(--color-success-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-success-dark);\n color: var(--color-text-on-dark);\n }\n }\n \n /* ===================================\n Cards - Clean with subtle borders\n =================================== */\n .card {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-card);\n box-shadow: var(--shadow-card);\n transition: all 0.2s ease;\n \n &:hover {\n border-color: var(--color-border-tab);\n box-shadow: var(--shadow-md);\n }\n }\n \n .card-title {\n font-weight: 600;\n color: var(--color-text-primary);\n font-size: 1.125rem;\n }\n \n /* ===================================\n Forms - Clean, modern inputs\n =================================== */\n input[type=text],\n input[type=email],\n input[type=password],\n input[type=number],\n input[type=url],\n input[type=search],\n input[type=tel],\n textarea,\n .form-input {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n transition: all 0.2s ease;\n \n &::placeholder {\n color: var(--color-text-muted);\n }\n \n &:focus {\n background-color: var(--color-bg-primary);\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n select, .form-select {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n \n &:focus {\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n label, .form-label {\n color: var(--color-text-primary);\n font-weight: 600;\n font-size: 0.875rem;\n margin-bottom: 0.5rem;\n display: block;\n }\n \n /* ===================================\n Badges - Subtle rounded style\n =================================== */\n .badge {\n border-radius: var(--radius-badge);\n font-weight: 600;\n font-size: 0.75rem;\n padding: 0.25rem 0.75rem;\n }\n \n .badge-success {\n background-color: var(--color-success-light);\n color: var(--color-success-dark);\n }\n \n .badge-danger {\n background-color: var(--color-danger-light);\n color: var(--color-danger-dark);\n }\n \n .badge-warning {\n background-color: var(--color-warning-light);\n color: var(--color-warning-dark);\n }\n \n .badge-info {\n background-color: var(--color-info-light);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Tabs - Clean, modern style\n =================================== */\n .tabs-list {\n background-color: transparent;\n border-bottom: 2px solid var(--color-border);\n padding: 0;\n }\n \n .tab-trigger {\n border-radius: 0;\n font-weight: 500;\n color: var(--color-text-muted);\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n padding: 0.75rem 1rem;\n margin-bottom: -2px;\n transition: all 0.15s ease;\n \n &:hover:not(.active):not([data-state=\"active\"]) {\n color: var(--color-text-primary);\n border-bottom-color: var(--color-border-tab);\n }\n \n &.active,\n &[data-state=\"active\"] {\n color: var(--color-primary);\n border-bottom-color: var(--color-primary);\n font-weight: 600;\n }\n }\n \n /* ===================================\n Dropdowns - Clean and sharp\n =================================== */\n .dropdown-menu {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-dropdown);\n box-shadow: var(--shadow-dropdown);\n padding: 0.5rem;\n }\n \n .dropdown-item {\n border-radius: var(--radius-sm);\n color: var(--color-text-neutral);\n font-weight: 500;\n padding: 0.625rem 0.75rem;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n /* ===================================\n Alerts/Callouts\n =================================== */\n .alert, .callout {\n border-radius: var(--radius-md);\n padding: 1rem 1.25rem;\n border: 1px solid;\n }\n \n .alert-success, .callout-success {\n background-color: var(--color-success-light);\n border-color: var(--color-success);\n color: var(--color-success-dark);\n }\n \n .alert-danger, .callout-danger, .alert-destructive {\n background-color: var(--color-danger-light);\n border-color: var(--color-danger);\n color: var(--color-danger-dark);\n }\n \n .alert-warning, .callout-warning {\n background-color: var(--color-warning-light);\n border-color: var(--color-warning);\n color: var(--color-warning-dark);\n }\n \n .alert-info, .callout-info {\n background-color: var(--color-info-light);\n border-color: var(--color-info);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Toast\n =================================== */\n .toast {\n background-color: var(--color-bg-primary);\n border-radius: var(--radius-toast);\n box-shadow: var(--shadow-toast);\n border: 1px solid var(--color-border);\n }\n \n /* ===================================\n Avatars - Circular\n =================================== */\n .avatar {\n border-radius: var(--radius-full);\n border: 2px solid var(--color-bg-primary);\n box-shadow: var(--shadow-sm);\n }\n \n /* ===================================\n Tables - Full bordered style for Groq\n =================================== */\n table {\n border-radius: var(--radius-md);\n border-collapse: separate;\n border-spacing: 0;\n border: 1px solid var(--color-border);\n }\n \n th {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n font-weight: 600;\n border-right: 1px solid var(--color-border);\n border-bottom: 1px solid var(--color-border);\n }\n \n th:last-child {\n border-right: none;\n }\n \n td {\n border-right: 1px solid var(--color-border);\n border-bottom: 1px solid var(--color-border);\n }\n \n td:last-child {\n border-right: none;\n }\n \n /* Keep bottom border on last row (commented out / redundant BUT kind of looks nice so keeping) */\n // tbody tr:last-child td {\n // border-bottom: 1px solid var(--color-border);\n // }\n \n /* Rounded corners on corner cells */\n thead tr:first-child th:first-child {\n border-top-left-radius: var(--radius-md);\n }\n \n thead tr:first-child th:last-child {\n border-top-right-radius: var(--radius-md);\n }\n \n tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-md);\n }\n \n tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-md);\n }\n \n /* ===================================\n Accordions\n =================================== */\n .accordion-group {\n border-radius: var(--radius-md);\n // border: 1px solid var(--color-border);\n overflow: hidden;\n }\n \n .accordion-button {\n font-weight: 600;\n color: var(--color-text-primary);\n \n &:hover {\n background-color: var(--color-bg-muted);\n }\n }\n \n /* ===================================\n Toggle Groups\n =================================== */\n .toggle-group {\n background-color: var(--color-bg-muted);\n border-radius: var(--radius-md);\n padding: 0.25rem;\n }\n \n .toggle-group-item {\n // border-radius: var(--radius-md);\n color: var(--color-text-muted);\n font-weight: 500;\n \n &:hover:not(.active):not([data-state=\"on\"]) {\n color: var(--color-text-primary);\n }\n \n &.active,\n &[data-state=\"on\"] {\n background-color: var(--color-bg-primary);\n color: var(--color-text-primary);\n box-shadow: var(--shadow-sm);\n }\n }\n \n /* ===================================\n Utility Classes\n =================================== */\n .text-accent { color: var(--color-accent); }\n .text-primary { color: var(--color-text-primary); }\n .text-muted { color: var(--color-text-muted); }\n .text-on-dark { color: var(--color-text-on-dark); }\n \n .bg-muted { background-color: var(--color-bg-muted); }\n .bg-secondary { background-color: var(--color-bg-secondary); }\n .bg-dark { \n background-color: var(--color-bg-dark); \n color: var(--color-text-on-dark);\n }\n \n .border-accent { border-color: var(--color-accent); }\n .border-primary { border-color: var(--color-primary); }\n \n /* ===================================\n Groq-Specific Utility Classes\n Use the extended color palette\n =================================== */\n \n /* Orange variants */\n .text-groq-orange { color: var(--groq-orange-400); }\n .bg-groq-orange { background-color: var(--groq-orange-400); }\n .border-groq-orange { border-color: var(--groq-orange-400); }\n \n /* Yellow variants */\n .text-groq-yellow { color: var(--groq-yellow-300); }\n .bg-groq-yellow { background-color: var(--groq-yellow-300); }\n .border-groq-yellow { border-color: var(--groq-yellow-300); }\n \n /* Green variants */\n .text-groq-green { color: var(--groq-green-300); }\n .bg-groq-green { background-color: var(--groq-green-300); }\n .border-groq-green { border-color: var(--groq-green-300); }\n \n /* Blue variants */\n .text-groq-blue { color: var(--groq-blue-300); }\n .bg-groq-blue { background-color: var(--groq-blue-300); }\n .border-groq-blue { border-color: var(--groq-blue-300); }\n \n /* Purple variants */\n .text-groq-purple { color: var(--groq-purple-300); }\n .bg-groq-purple { background-color: var(--groq-purple-300); }\n .border-groq-purple { border-color: var(--groq-purple-300); }\n \n /* Pink variants */\n .text-groq-pink { color: var(--groq-pink-300); }\n .bg-groq-pink { background-color: var(--groq-pink-300); }\n .border-groq-pink { border-color: var(--groq-pink-300); }\n}\n\n/* ===================================\n Groq Dark Mode\n Vibrant orange on dark backgrounds\n =================================== */\n\n.theme-scope.dark,\n.dark .theme-scope {\n /* ===================================\n Base Dark Theme Override\n =================================== */\n \n background-color: var(--groq-gray-900);\n color: var(--groq-gray-50);\n \n /* ===================================\n Groq Dark Mode Semantic Colors\n =================================== */\n \n /* Primary = Groq Orange (brighter for dark mode) */\n --color-primary: var(--groq-orange-600);\n --color-primary-hover: var(--groq-orange-500);\n --color-primary-active: var(--groq-orange-400);\n --color-primary-dark: var(--groq-orange-300);\n --color-primary-light: rgba(244, 62, 1, 0.15);\n --color-primary-lighter: rgba(244, 62, 1, 0.1);\n --color-primary-lightest: rgba(244, 62, 1, 0.05);\n --color-primary-ring: rgba(254, 158, 32, 0.35);\n --color-primary-text: var(--groq-gray-950);\n \n /* Accent = Lighter Orange for variety */\n --color-accent: var(--groq-orange-300);\n --color-accent-hover: var(--groq-orange-400);\n --color-accent-light: var(--groq-orange-200);\n \n /* CTA uses main brand color */\n --color-cta: var(--groq-orange-400);\n --color-cta-hover: var(--groq-orange-500);\n \n /* Text Colors - Light on dark */\n --color-text-primary: var(--groq-gray-50);\n --color-text-secondary: var(--groq-gray-100);\n --color-text-muted: var(--groq-gray-400);\n --color-text-neutral: var(--groq-gray-300);\n --color-text-neutral-dark: var(--groq-gray-100);\n --color-text-on-dark: var(--groq-gray-900);\n --color-text-on-dark-muted: rgba(26, 28, 31, 0.85);\n \n /* ===================================\n Background Colors - Dark\n =================================== */\n \n /* Base backgrounds */\n --color-bg-primary: var(--groq-gray-900);\n --color-bg-secondary: var(--groq-gray-800);\n --color-bg-muted: var(--groq-gray-700);\n --color-bg-light: var(--groq-gray-800);\n --color-bg-dark: var(--groq-gray-50);\n --color-bg-hover: var(--groq-gray-700);\n \n /* Console (App) backgrounds */\n --color-bg-card: var(--groq-gray-800);\n --color-bg-page: var(--groq-gray-900);\n \n /* Marketing backgrounds */\n --color-bg-nav: var(--groq-gray-800);\n --color-bg-hero: var(--groq-gray-900);\n --color-bg-section: var(--groq-gray-800);\n --color-bg-section-alt: var(--groq-gray-700);\n \n /* Borders - subtle on dark */\n --color-border: var(--groq-gray-700);\n --color-border-light: var(--groq-gray-600);\n --color-border-tab: var(--groq-gray-600);\n \n /* Semantic Colors - Brighter for dark mode */\n --color-success: var(--groq-green-400);\n --color-success-light: rgba(13, 217, 127, 0.15);\n --color-success-dark: var(--groq-green-300);\n --color-success-text: var(--groq-gray-950);\n \n --color-warning: var(--groq-yellow-300);\n --color-warning-light: rgba(253, 235, 32, 0.15);\n --color-warning-dark: var(--groq-yellow-200);\n --color-warning-text: var(--groq-gray-950);\n \n --color-danger: #f87171;\n --color-danger-light: rgba(239, 68, 68, 0.15);\n --color-danger-dark: #fca5a5;\n --color-danger-text: var(--groq-gray-950);\n \n --color-info: var(--groq-blue-300);\n --color-info-light: rgba(95, 192, 255, 0.15);\n --color-info-dark: var(--groq-blue-200);\n --color-info-text: var(--groq-gray-950);\n \n --color-neutral-text: var(--groq-gray-950);\n \n /* Utility Colors */\n --color-white: var(--groq-gray-900);\n --color-gray-300: var(--groq-gray-600);\n --color-gray-400: var(--groq-gray-500);\n \n /* Form Controls - Dark Mode */\n --color-control-border: var(--groq-gray-600);\n --color-control-border-hover: var(--groq-orange-400);\n --color-control-bg: var(--groq-gray-800);\n --color-control-bg-hover: var(--groq-gray-700);\n --color-control-checked: var(--groq-orange-400);\n --color-control-checked-hover: var(--groq-orange-500);\n --color-control-checked-border: var(--groq-orange-400);\n --color-control-checkmark: var(--groq-gray-950);\n --color-control-ring: rgba(254, 158, 32, 0.25);\n --color-toggle-bg: var(--groq-gray-600);\n --color-toggle-bg-checked: var(--groq-orange-400);\n --color-toggle-knob: var(--groq-gray-950);\n \n /* Choice Card Colors - Dark Mode */\n --color-choice-border: var(--groq-gray-600);\n --color-choice-border-hover: var(--groq-orange-400);\n --color-choice-border-checked: var(--groq-orange-400);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--groq-gray-700);\n --color-choice-bg-checked: rgba(254, 158, 32, 0.08);\n --color-choice-ring: var(--groq-orange-400);\n \n /* ===================================\n Shadows - Darker, more subtle\n =================================== */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);\n --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);\n --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);\n --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);\n --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.4);\n --shadow-toast: 0 10px 15px rgba(0, 0, 0, 0.4);\n \n /* ===================================\n Typography - Dark Mode\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n color: var(--groq-gray-50);\n }\n \n /* Links - Groq orange (brighter) */\n a, .link {\n color: var(--groq-orange-400);\n \n &:hover {\n color: var(--groq-orange-300);\n }\n }\n \n /* ===================================\n Groq Dark Mode Utility Classes\n Use brighter colors for dark backgrounds\n =================================== */\n \n /* Orange variants - brighter */\n .text-groq-orange { color: var(--groq-orange-300); }\n .bg-groq-orange { background-color: var(--groq-orange-500); }\n .border-groq-orange { border-color: var(--groq-orange-400); }\n \n /* Yellow variants */\n .text-groq-yellow { color: var(--groq-yellow-200); }\n .bg-groq-yellow { background-color: var(--groq-yellow-400); }\n .border-groq-yellow { border-color: var(--groq-yellow-300); }\n \n /* Green variants */\n .text-groq-green { color: var(--groq-green-300); }\n .bg-groq-green { background-color: var(--groq-green-400); }\n .border-groq-green { border-color: var(--groq-green-300); }\n \n /* Blue variants */\n .text-groq-blue { color: var(--groq-blue-200); }\n .bg-groq-blue { background-color: var(--groq-blue-400); }\n .border-groq-blue { border-color: var(--groq-blue-300); }\n \n /* Purple variants */\n .text-groq-purple { color: var(--groq-purple-300); }\n .bg-groq-purple { background-color: var(--groq-purple-400); }\n .border-groq-purple { border-color: var(--groq-purple-300); }\n \n /* Pink variants */\n .text-groq-pink { color: var(--groq-pink-300); }\n .bg-groq-pink { background-color: var(--groq-pink-400); }\n .border-groq-pink { border-color: var(--groq-pink-300); }\n \n /* Inverted utility classes */\n .text-primary { color: var(--groq-gray-50); }\n .text-muted { color: var(--groq-gray-400); }\n .text-on-dark { color: var(--groq-gray-900); }\n \n .bg-muted { background-color: var(--groq-gray-700); }\n .bg-secondary { background-color: var(--groq-gray-800); }\n .bg-dark { \n background-color: var(--groq-gray-50); \n color: var(--groq-gray-900);\n }\n}\n\n",[],[152,153,154,1045,64],"groq","335f493c-fad2-11f0-a4d3-42dde27851f2","335f4a04-fad2-11f0-a4d3-42dde27851f2",62,["D",1769444115988],"// Groq Theme Configuration\n// Real JSON data - gets wrapped in \n`;\n\n// Load base.css\nexport async function getStyles() {\n const baseUrl = new URL('.', import.meta.url);\n const cssUrl = new URL('./base.css', baseUrl);\n const cssPath = cssUrl.protocol === 'file:' ? cssUrl.pathname : cssUrl.href;\n const baseCss = await Deno.readTextFile(cssPath);\n \n return {\n tailwind: tailwindStyles,\n baseCss: baseCss\n };\n}\n",[],[152,153,154,1083,1075],"default","33d28ef6-fad2-11f0-9219-42dde27851f2","33d28f96-fad2-11f0-9219-42dde27851f2",79,["D",1769444116773],"// Default Theme Configuration\n// Clean Shadcn-style with custom Brand Blue color family\n// Real JSON data - gets wrapped in

Select a Workout

Select a Workout

Hi

History · cursor