Hand-Drawn Doodle

# Visual style: Hand-Drawn Doodle

Hand-drawn lines, doodle illustrations, irregular shapes, and handwritten fonts. Like designs casually sketched in a notebook -- full of creativity and fun, conveying a warm and approachable handmade feel.

## Philosophy
Hand-Drawn Doodle style simulates the texture of hand-crafted drawing, creating a warm, approachable, and creatively rich visual experience.

Core principles:
- Notebook paper: Cream-white background simulating real notebooks, with blue ruled lines and red margin lines
- Hand-drawn lines: Dashed borders simulating hand-drawn strokes, avoiding precise geometry
- Irregular forms: Subtle rotations and offsets create a handmade feel
- Marker pen colors: Red, teal, and yellow three-color marker pen accents
- Decorative elements: Tape, pushpins, paperclips, coffee stain rings, and other paper decorations
- Doodle accents: Casually drawn stars, squiggly lines, arrows, and other decorations

## Do
- Use dashed borders (border-dashed) to simulate hand-drawn lines
- Use cream paper color #fffef5 background
- Use ink black #2c2c2c as primary color
- Add subtle rotation (rotate) to simulate hand-drawn irregularity
- Use marker pen colors: red #ff6b6b, teal #4ecdc4, yellow #ffd93d
- Use sans-serif fonts, maintaining a casual feel
- Add notebook ruled-line backgrounds
- Use tape/pushpin/paperclip decorative elements

## Don't
- Do not use precise geometric shapes and right angles (rounded-none)
- Do not use gradient effects
- Do not use precise shadows (shadow-md, etc.)
- Do not use monospace fonts
- Do not use solid borders (border-solid)
- Do not use large border radius (rounded-lg and above)

## Rules for the AI
You are a Hand-Drawn Doodle design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Sharp geometric precision (rounded-none) - use rounded-sm instead
- Gradients of any kind (bg-gradient)
- Precise shadows (shadow-md, shadow-lg) - use hard offset shadows only
- Monospace fonts (font-mono)
- Solid borders (border-solid) - always use border-dashed
- Large border radius (rounded-lg and above)
- Dark backgrounds - always use paper-white

## Must Follow

- Paper-white background: bg-[#fffef5]
- Ink black text: text-[#2c2c2c]
- Dashed borders everywhere: border-2 border-dashed
- Sans-serif fonts only: font-sans
- Subtle rotations on elements for hand-drawn feel (rotate-[Ndeg])
- Marker colors: red #ff6b6b, teal #4ecdc4, yellow #ffd93d
- Offset shadows with marker colors: shadow-[Npx_Npx_0px_color]
- Notebook line backgrounds for sections

## Color Palette

Primary:
- Ink Black: #2c2c2c (text, borders)
- Paper White: #fffef5 (backgrounds)
- Red Marker: #ff6b6b (accents, highlights)
- Teal Marker: #4ecdc4 (shadows, accents)
- Yellow Marker: #ffd93d (highlights, tape)

## Special Elements

- Notebook line backgrounds (repeating-linear-gradient)
- Red margin line decorations
- Wavy underlines (text-decoration-style: wavy)
- Marker highlight effects
- Tape, pushpin, and paperclip decorations on cards
- Subtle element rotations for sketchy feel
- Spiral binding holes on left edge
- Coffee stain ring decorations
- Hand-drawn stars and squiggles via SVG

## Animation & Interaction Rules

- Stop-Motion Jitter: Hover creates hand-drawn tremor feel through tiny rotations and displacements, avoiding smooth mechanical motion.
- Ink Filling: May enhance border thickness or color contrast to simulate "re-inking", while maintaining border-dashed hand-drawn semantics.
- Offset Smudge: Only use hard-edge offset shadows; hover changes offset amount and marker pen color, like a second stroke.
- Paper Press: Active state flattens shadow with slight scale (e.g., scale-[0.98]), presenting finger-pressing-paper feedback.