:root {
    --bg:        #0d0d0d;
    --panel:     #111110;
    --fg:        #d7d1c2;
    --fg-bright: #f3efe5;
    --muted:     #837c68;
    --faint:     #4a463d;
    --accent:    #b5232a;
    --amber:     #d9a441;
    --line:      #242219;
    --sel:       #46161a;

    --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --disp: var(--mono);
    --ar:   'Amiri', 'Scheherazade New', 'Times New Roman', serif;

    --lh: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--line) var(--bg);
}

body {
    font-family: var(--mono);
    font-size: 15px;
    line-height: var(--lh);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--fg);
    background: var(--bg);
    width: min(1120px, 100% - 6vw);
    margin-inline: auto;
    padding: calc(var(--lh) * 1.5) 0 calc(var(--lh) * 3);
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
    opacity: 0.28;
    mix-blend-mode: multiply;
}

::selection { background: var(--sel); color: var(--fg-bright); }

a {
    color: var(--fg-bright);
    text-decoration: none;
    border-bottom: 1px solid var(--faint);
    transition: color 0.12s, border-color 0.12s;
}
a:hover { color: var(--accent); border-color: var(--accent); }

b, strong { color: var(--fg-bright); font-weight: 600; }
em { color: var(--fg-bright); font-style: italic; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    body::after { display: none; }
}