@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&display=swap');

* { font-family: 'JetBrains Mono', monospace; }

body {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Animations */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes glitch {
    0%, 90%, 100% { text-shadow: none; transform: translate(0); }
    92% { text-shadow: -2px 0 #ef4444; transform: translateX(2px); }
    94% { text-shadow: 2px 0 #60a5fa; transform: translateX(-2px); }
    96% { text-shadow: none; transform: translate(0); }
}
@keyframes typing { to { width: 100%; } }

.animate-pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }
.animate-blink { animation: blink 1s step-end infinite; }
.animate-glitch { animation: glitch 4s infinite; }

/* Reading bar */
.reading-bar {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: #ef4444;
    z-index: 100;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* Arrow hover on parent */
.card-link:hover .card-arrow { transform: translateX(4px); }
.card-arrow { transition: transform 0.2s; }

/* Input focus line */
.input-wrap { position: relative; }
.input-line {
    position: absolute;
    bottom: 0; left: 0;
    height: 1px;
    background: #ef4444;
    width: 0;
    transition: width 0.25s ease;
}
.peer:focus ~ .input-line { width: 100%; }

/* Custom checkbox */
input[type="checkbox"] {
    appearance: none;
    width: 1rem; height: 1rem;
    border: 1px solid #3f3f46;
    background: #09090b;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}
input[type="checkbox"]:checked { background: #ef4444; border-color: #ef4444; }
input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    color: #000;
    font-weight: 900;
}

/* Prose styles for article body */
.prose p { color: #a1a1aa; line-height: 1.85; margin-bottom: 1.25rem; font-size: 0.875rem; }
.prose h2 { color: #fff; font-weight: 700; font-size: 1.05rem; margin-top: 2.5rem; margin-bottom: 1rem; padding-left: 1rem; border-left: 2px solid #ef4444; }
.prose h3 { color: #d4d4d8; font-weight: 700; font-size: 0.9rem; margin-top: 1.75rem; margin-bottom: 0.75rem; }
.prose code { background: #18181b; border: 1px solid #27272a; color: #ef4444; padding: 0.1em 0.4em; font-size: 0.82em; border-radius: 2px; }
.prose pre { background: #09090b; border: 1px solid #27272a; padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0; border-radius: 2px; }
.prose pre code { background: none; border: none; color: #d4d4d4; padding: 0; font-size: 0.8rem; }
.prose blockquote { border-left: 2px solid #27272a; padding-left: 1.25rem; color: #52525b; margin: 1.5rem 0; font-style: italic; font-size: 0.875rem; }
.prose a { color: #ef4444; border-bottom: 1px solid rgba(239,68,68,0.3); transition: border-color 0.15s; }
.prose a:hover { border-bottom-color: #ef4444; }
.prose ul { color: #a1a1aa; font-size: 0.875rem; padding-left: 0; margin-bottom: 1.25rem; list-style: none; }
.prose ul li { margin-bottom: 0.4rem; }
.prose ul li::before { content: '→ '; color: #ef4444; }
.prose hr { border: none; border-top: 1px solid #18181b; margin: 2.5rem 0; }

pre[class*="language-"],
code[class*="language-"] {
    background: transparent !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    text-shadow: none !important;
}
pre[class*="language-"] {
    margin: 0;
    padding: 0;
    overflow: auto;
}
.code-wrapper {
    background: #09090b;
    border: 1px solid #27272a;
    padding: 1.25rem;
    overflow: auto;
}

/* Java token overrides */
.token.annotation { color: #71717a !important; }
.token.keyword     { color: #a1a1aa !important; }
.token.class-name  { color: #ffffff !important; }
.token.string      { color: #f87171 !important; }
.token.comment     { color: #52525b !important; font-style: italic; }
.token.function    { color: #e4e4e7 !important; }
.token.number      { color: #fb923c !important; }
.token.operator,
.token.punctuation { color: #71717a !important; }
.token.builtin     { color: #a1a1aa !important; }
/* Twig / template tokens */
.token.tag         { color: #a1a1aa !important; }
.token.attr-name   { color: #f87171 !important; }
.token.attr-value  { color: #f87171 !important; }
.token.variable    { color: #f87171 !important; }

/* Toolbar copy button */
div.code-toolbar > .toolbar {
    opacity: 1 !important;
}
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar a {
    background: #27272a !important;
    color: #71717a !important;
    border-radius: 3px;
    font-size: 0.65rem;
    padding: 3px 8px;
    box-shadow: none !important;
}
div.code-toolbar > .toolbar button:hover {
    color: #e4e4e7 !important;
}

/* Filename label */
.file-label {
    font-size: 0.7rem;
    color: #52525b;
    margin-bottom: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
}

.sidebar {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 2px;
}