:root {
    --fastapp-bg: #f2ece1;
    --fastapp-bg-deep: #efe8db;
    --fastapp-ink: #101114;
    --fastapp-muted: #686354;
    --fastapp-line: rgba(128, 109, 84, 0.18);
    --fastapp-panel: rgba(255, 255, 255, 0.74);
    --fastapp-accent: #9b6c3f;
}

html {
    scroll-behavior: smooth;
}

body.fastapp-body {
    font-family: "Manrope", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.78), transparent 26%),
        radial-gradient(circle at 84% 10%, rgba(203, 184, 162, 0.28), transparent 24%),
        linear-gradient(180deg, var(--fastapp-bg) 0%, var(--fastapp-bg-deep) 100%);
}

.fastapp-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
}

.menu a:hover {
    background: rgba(16, 17, 20, 0.05);
}

.text-ink {
    color: #101114;
}

.bg-ink {
    background-color: #101114;
}

.text-accent {
    color: #9b6c3f;
}

.border-accent {
    border-color: #9b6c3f;
}

.hover\:border-accent:hover {
    border-color: #9b6c3f;
}

.shadow-panel {
    box-shadow: 0 18px 50px rgba(18, 20, 24, 0.08);
}

.shadow-soft-xl {
    box-shadow: 0 30px 80px rgba(18, 20, 24, 0.12);
}

.top-18 {
    top: 4.5rem;
}

.fastapp-accent-panel {
    background: linear-gradient(135deg, rgba(155, 108, 63, 0.35), rgba(255, 255, 255, 0.08));
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}