:root {
  --bg: #1a0f2e;          /* deep purple */
  --fg: #f3e8ff;          /* near-white lilac */
  --muted: #c4a7e7;       /* soft violet */
  --accent: #ec4899;      /* pink */
  --accent-2: #a855f7;    /* purple */
  --code-bg: #2a1a45;
}
body { max-width: 42rem; margin: 3rem auto; padding: 0 1rem;
       font: 16px/1.6 system-ui, sans-serif;
       background: var(--bg); color: var(--fg); }
a { color: var(--accent); text-decoration-color: var(--accent-2); }
a:hover { color: var(--accent-2); }
h1 { line-height: 1.2;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
     -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { color: var(--accent-2); }
time { color: var(--muted); font-size: 0.9rem; }
nav { margin-bottom: 2rem; }
code { background: var(--code-bg); color: var(--fg);
       padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }
pre { background: var(--code-bg); padding: 1rem; border-radius: 8px;
      overflow-x: auto; border-left: 3px solid var(--accent); }
pre code { background: none; padding: 0; }

/* subtle site header */
.site-header { display: flex; align-items: baseline; gap: 1.5rem;
               margin-bottom: 3rem; padding-bottom: 1rem;
               border-bottom: 1px solid var(--code-bg); }
.site-header .brand { font-weight: 600; color: var(--fg);
                      text-decoration: none; margin-right: auto; }
.site-header .brand:hover { color: var(--accent); }
.site-header nav { margin: 0; }
.site-header nav a { color: var(--muted); text-decoration: none;
                     font-size: 0.9rem; margin-left: 1.25rem; }
.site-header nav a:hover { color: var(--accent); }
.site-header nav a.active { color: var(--fg); font-weight: 600; }
.back-link { margin-top: 3rem; font-size: 0.9rem; }

/* animated L decoration */
.l-mark { --size: 2.5rem; --stroke: 2px;
          width: var(--size); height: var(--size);
          position: fixed; left: 1rem; bottom: 1rem; }
.l-mark--tr { left: auto; right: 1rem; bottom: auto; top: 1rem;
              transform: rotate(180deg); }
.l-mark--tr::before, .l-mark--tr::after { animation-direction: reverse; }
.l-mark::before, .l-mark::after {
          content: ""; position: absolute;
          background-color: #f97316;
          animation: l-color 120s linear infinite,
                     l-pulse 8s linear infinite; }
.l-mark::before { left: 0; top: 0;
          width: var(--stroke); height: 100%; }
.l-mark::after { left: 0; bottom: 0;
          width: 100%; height: var(--stroke); }
@keyframes l-color {
  0%   { background-color: #f97316; }  /* orange */
  25%  { background-color: #a855f7; }  /* purple */
  50%  { background-color: #ec4899; }  /* pink   */
  75%  { background-color: #fbbf24; }  /* yellow */
  100% { background-color: #f97316; }
}
@keyframes l-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}