body { background-color: #18181b; color: #f4f4f5; }

input, textarea, select {
    background-color: #27272a;
    border: 1px solid #3f3f46;
    color: #f4f4f5;
    transition: all 0.2s;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid #4ade80;
    border-color: transparent;
}

.card {
    background-color: #27272a;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Rendered blog post HTML (raw inline HTML from the editor) gets basic
   readable typography without relying on the Tailwind typography plugin. */
.prose-post { line-height: 1.7; }
.prose-post :first-child { margin-top: 0; }
.prose-post p { margin: 0 0 1rem 0; }
.prose-post h1, .prose-post h2, .prose-post h3 {
    color: #86efac;
    font-weight: 700;
    margin: 1.5rem 0 0.75rem 0;
}
.prose-post h1 { font-size: 1.75rem; }
.prose-post h2 { font-size: 1.4rem; }
.prose-post h3 { font-size: 1.15rem; }
.prose-post a { color: #4ade80; text-decoration: underline; }
.prose-post a:hover { color: #86efac; }
.prose-post img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }
.prose-post ul, .prose-post ol { margin: 0 0 1rem 1.5rem; }
.prose-post ul { list-style: disc; }
.prose-post ol { list-style: decimal; }
.prose-post blockquote {
    border-left: 3px solid #3f3f46;
    padding-left: 1rem;
    color: #a1a1aa;
    margin: 1rem 0;
}
.prose-post pre {
    background-color: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}
.prose-post code {
    background-color: #18181b;
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
}
.prose-post pre code { background: none; padding: 0; }
.prose-post table { border-collapse: collapse; margin: 1rem 0; }
.prose-post th, .prose-post td { border: 1px solid #3f3f46; padding: 0.5rem 0.75rem; }