body {
    font: 100%/1.5 system-ui;
}

/* Subtle scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-thumb {
    background: #1f2430;
    border-radius: 999px
}

html {
    scroll-behavior: smooth
}

.focus-ring:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px
}

.link {
    text-underline-offset: 4px;
    text-decoration-thickness: 1px
}

/* Reusable utilities to trim repeated class lists */
.chip {
    padding: 0.25rem 0.625rem;
    /* py-1 px-2.5 */
    border-radius: 0.375rem;
    /* rounded-md */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* border-white/10 */
    color: #d1d5db;
    /* text-gray-300 */
}

.writing-card {
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* border-white/10 */
    padding: 1rem;
    /* p-4 */
    transition: all 150ms ease-in-out;
    /* transition */
}

.writing-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    /* hover:border-white/30 */
}

.writing-filter {
    padding: 0.25rem 0.5rem;
    /* px-2 py-1 */
    border-radius: 9999px;
    /* rounded-full */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* border-white/20 */
    transition: border-color 150ms ease-in-out;
}

.writing-filter:hover {
    border-color: rgba(255, 255, 255, 0.4);
    /* hover:border-white/40 */
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important
    }

    a {
        color: #000 !important;
        text-decoration: underline
    }

    .no-print {
        display: none !important
    }

    .print-only {
        display: block !important
    }
}

.title-gradient {
    background-color: #9eadf1;
    background-image: linear-gradient(90deg, #EAECC6, #2BC0E4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.force-diff {
    line-height: 1.7 !important;
}

/* Replacing Tailwind @apply (requires build) with plain CSS */
.mark {
    padding-left: 0.625rem;
    /* px-2.5 */
    padding-right: 0.625rem;
    /* px-2.5 */
    padding-top: 0.25rem;
    /* py-1 */
    padding-bottom: 0.25rem;
    /* py-1 */
    font-size: 12px;
    /* text-[12px] */
    text-transform: uppercase;
    /* uppercase */
    margin: 0.25rem;
    /* m-1 */
    display: inline-block;
    /* inline-block */
    border-radius: 0.375rem;
    /* rounded-md */
}

.program {
    color: #22d3ee;
    /* text-cyan-400 */
    background-color: rgba(34, 211, 238, 0.1);
    /* bg-cyan-400/10 */
}

.ml {
    color: #34d399;
    /* text-green-400 */
    background-color: rgba(52, 211, 153, 0.1);
    /* bg-green-400/10 */
}

.alg {
    color: #a78bfa;
    /* text-purple-400 */
    background-color: rgba(167, 139, 250, 0.1);
    /* bg-purple-400/10 */
}