:root {
    --bulma-primary: #89b4fa;
    --bulma-link: #89b4fa;
}
html, body {
    background-color: #11111b !important;
    font-family: 'Lexend', sans-serif;
    color: #cdd6f4;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
.navbar {
    background-color: #11111b !important;
    border-bottom: none;
    padding: 1rem 0;
}
.navbar-item, .navbar-link {
    color: #cdd6f4 !important;
}
.boxy-brand-button {
    background-color: #1e1e2e;
    border: 2px solid #a6e3a1; /* Catppuccin Green */
    border-radius: 8px;
    padding: 0.5rem 1rem !important;
    font-weight: 800;
    color: #f5e0dc !important;
    box-shadow: 1px 1px 0 #a6e3a1, 2px 2px 0 #a6e3a1, 3px 3px 0 #a6e3a1;
    transform: translate(-2px, -2px);
    transition: all 0.1s ease-out;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}
.boxy-brand-button:hover {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 #a6e3a1;
}
.boxy-github-button {
    background-color: #ffffff;
    border: 2px solid #a6e3a1; /* Catppuccin Green */
    border-radius: 8px;
    padding: 0.4rem 0.8rem !important;
    font-weight: 800;
    color: #11111b !important;
    box-shadow: 1px 1px 0 #a6e3a1, 2px 2px 0 #a6e3a1, 3px 3px 0 #a6e3a1;
    transform: translate(-2px, -2px);
    transition: all 0.1s ease-out;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
    font-size: 0.9rem;
    cursor: pointer;
}
.boxy-github-button:hover {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 #a6e3a1;
}
.boxy-github-button .star-count {
    background-color: #f1f1f1;
    color: #11111b;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 900;
    border: 1px solid #d1d1d1;
}
.footer {
    background-color: #11111b !important;
    color: #a6adc8;
    border-top: none;
    padding: 3rem 1.5rem;
}
.fancy-box {
    background-color: #1e1e2e;
    border: 3px solid #f9e2af; /* Catppuccin Yellow */
    border-radius: 16px;
    box-shadow: 1px 1px 0 #f9e2af, 2px 2px 0 #f9e2af, 3px 3px 0 #f9e2af, 4px 4px 0 #f9e2af, 5px 5px 0 #f9e2af, 6px 6px 0 #f9e2af;
    transform: translate(-4px, -4px);
    transition: all 0.2s ease-out;
}
.fancy-box:hover {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 #f9e2af, 2px 2px 0 #f9e2af;
}
.sidebar {
    background-color: #1e1e2e;
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid #313244;
    min-height: calc(100vh - 200px);
}
.sidebar-title {
    color: #f38ba8 !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem !important;
    font-size: 0.9rem;
}
.menu-list a {
    color: #cdd6f4 !important;
    border-radius: 8px;
    margin-bottom: 2px;
    padding: 0.5rem 0.75rem;
}
.menu-list a:hover {
    background-color: #313244 !important;
    color: #89b4fa !important;
}
.menu-list a.is-active {
    background-color: #89b4fa !important;
    color: #11111b !important;
    font-weight: 700;
}
.content-area {
    background-color: #1e1e2e;
    padding: 3rem;
    border-radius: 16px;
    border: 2px solid #313244;
}
.content-area h1 { color: #f5e0dc !important; }
.content-area h2 { color: #f2cdcd !important; }
.content-area h3 { color: #f9e2af !important; }
.content-area p { line-height: 1.8; margin-bottom: 1.5rem; }
pre {
    background-color: #11111b !important;
    color: #bac2de !important; /* Catppuccin Subtext 1 */
    border: none !important;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    overflow-x: auto;
    margin: 1.5rem 0 !important;
    position: relative; /* For the copy button */
}
/* Style for the dynamically added copy buttons on pre blocks */
.pre-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #313244;
    color: #cdd6f4;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    opacity: 0;
}
pre:hover .pre-copy-btn {
    opacity: 1;
}
.pre-copy-btn:hover {
    background-color: #45475a;
}
/* Ensure the copy button doesn't shrink the text area */
pre code {
    display: block;
    padding-right: 2.5rem !important; /* Make room for the button */
}
.quoted-text {
    color: #f9e2af !important; /* Catppuccin Yellow */
    font-weight: 700;
    padding: 0 0.1rem;
    border-radius: 4px;
}
/* Style for inline code blocks (not inside pre) */
:not(pre) > code {
    background-color: #313244 !important;
    color: #89b4fa !important; /* Catppuccin Blue */
    padding: 0.15rem 0.4rem !important;
    border-radius: 6px !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    border: 1px solid #45475a !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
/* Ensure code inside pre stays transparent */
pre code {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    display: block;
    padding-right: 2.5rem !important; /* Make room for the button */
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}
/* Ensure no italic styling inside code blocks from syntax highlighters */
pre code span, pre code {
    font-style: normal !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* Override syntax highlighting colors to fit the theme better */
/* Target the bright green often used for paths and strings */
pre code span[style*="color: #a6e3a1"], 
pre code span[style*="color:#a6e3a1"] {
    color: #94e2d5 !important; /* Catppuccin Teal - softer and more terminal-like */
}

/* Target a slightly different shade of green if present */
pre code span[style*="color: #40a02b"],
pre code span[style*="color:#40a02b"] {
    color: #89dceb !important; /* Catppuccin Sky */
}

.installation-code {
    max-width: 900px;
    margin: 3rem auto;
}
.installation-code pre {
    background-color: transparent !important;
    margin: 0 !important;
    border: none !important;
}
.feature-grid {
    margin-top: 8rem;
    margin-bottom: 6rem;
}
.feature-item {
    height: 100%;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.feature-item .icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: block;
    height: auto;
    width: auto;
}
.feature-item h3 {
    color: #f9e2af !important; /* Catppuccin Yellow */
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.feature-item p {
    color: #bac2de;
    line-height: 1.6;
    font-weight: 500;
}
.title {
    color: #f5e0dc !important;
}
.subtitle {
    color: #bac2de !important;
}
.boxy-badge {
    display: inline-flex;
    align-items: center;
    background-color: #1e1e2e;
    border: 3px solid #f38ba8;
    border-radius: 12px;
    padding: 0.75rem 1.5rem 0.75rem 0.75rem;
    box-shadow: 1px 1px 0 #f38ba8, 2px 2px 0 #f38ba8, 3px 3px 0 #f38ba8, 4px 4px 0 #f38ba8, 5px 5px 0 #f38ba8, 6px 6px 0 #f38ba8, 7px 7px 0 #f38ba8, 8px 8px 0 #f38ba8;
    margin-bottom: 2.5rem;
    margin-left: 4px;
    transform: translate(-4px, -4px);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    user-select: none;
}
.boxy-badge:hover {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 #f38ba8;
}
/* Easter Egg Speech Bubble */
.easter-egg-container {
    position: relative;
    display: inline-flex;
}
.speech-bubble {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f9e2af; /* Yellow */
    color: #11111b;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 4px 4px 0 #11111b;
    z-index: 100;
    pointer-events: none;
    animation: popIn 0.2s ease-out;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f9e2af;
}
@keyframes popIn {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.boxy-badge img {
    width: 75px;
    height: auto;
    margin-right: 1.25rem;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
}
.boxy-badge-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f5e0dc;
    line-height: 1.1;
}
.boxy-badge-text .feat {
    font-size: 0.8rem;
    display: block;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #a6adc8;
    margin-bottom: 2px;
    font-weight: 600;
}
.boxy-badge-text .highlight {
    color: #f38ba8;
}
.fancy-title {
    color: #f5e0dc !important;
    line-height: 1.3;
    letter-spacing: -1px;
}
.fancy-title .gradient-text {
    background: linear-gradient(135deg, #f38ba8 0%, #cba6f7 50%, #89b4fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}
.fancy-title .accent-text {
    color: #a6e3a1; /* Catppuccin Green */
}
.hero-box {
    background-color: #1e1e2e;
    border: 3px solid #cba6f7; /* Catppuccin Mauve */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 1px 1px 0 #cba6f7, 2px 2px 0 #cba6f7, 3px 3px 0 #cba6f7, 4px 4px 0 #cba6f7, 5px 5px 0 #cba6f7, 6px 6px 0 #cba6f7, 7px 7px 0 #cba6f7, 8px 8px 0 #cba6f7, 9px 9px 0 #cba6f7, 10px 10px 0 #cba6f7, 11px 11px 0 #cba6f7, 12px 12px 0 #cba6f7;
    transform: translate(-6px, -6px);
    transition: all 0.2s ease-out;
}
.hero-box:hover {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 #cba6f7, 2px 2px 0 #cba6f7;
}
.boxy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1e1e2e;
    border: 3px solid #89b4fa; /* Catppuccin Blue */
    border-radius: 12px;
    padding: 0.8rem 1.8rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #f5e0dc;
    box-shadow: 1px 1px 0 #89b4fa, 2px 2px 0 #89b4fa, 3px 3px 0 #89b4fa, 4px 4px 0 #89b4fa;
    transform: translate(-3px, -3px);
    transition: all 0.1s ease-out;
    cursor: pointer;
    text-decoration: none !important;
}
.boxy-button:hover {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 #89b4fa;
}
.boxy-button.is-alt {
    border-color: #cba6f7; /* Mauve */
    box-shadow: 1px 1px 0 #cba6f7, 2px 2px 0 #cba6f7, 3px 3px 0 #cba6f7, 4px 4px 0 #cba6f7;
}
.boxy-button.is-alt:hover {
    box-shadow: 1px 1px 0 #cba6f7;
}
.boxy-button.is-dev {
    border-color: #a6e3a1; /* Green */
    box-shadow: 1px 1px 0 #a6e3a1, 2px 2px 0 #a6e3a1, 3px 3px 0 #a6e3a1, 4px 4px 0 #a6e3a1;
}
.boxy-button.is-dev:hover {
    box-shadow: 1px 1px 0 #a6e3a1;
}