:root { color-scheme: dark; }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { background: #231e20 !important; min-height: 100%; }
        body { font-family: 'Playfair Display', Georgia, serif; background: #231e20 !important; color: #f7f2e9 !important; line-height: 1.7; min-height: 100vh; }
        body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #231e20; z-index: -1; }
        a { color: inherit; text-decoration: none; }
        
        .sidebar { position: fixed; left: 20px; bottom: 30px; z-index: 100; display: flex; flex-direction: column; gap: 12px; }
        .sidebar a { display: block; }
        .sidebar svg { width: 22px; height: 22px; fill: #f7f2e9 !important; }
        @media (max-width: 768px) {
            .sidebar { position: fixed; left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: center; gap: 18px; padding: 12px; background-color: #231e20; border-top: 1px solid rgba(247,242,233,0.18); }
            .sidebar svg { width: 18px; height: 18px; }
        }
        
        header { max-width: 650px; margin: 0 auto; padding: 30px 25px 10px; }
        .back-link { font-family: 'Caveat', cursive; font-size: 22px; color: #f7f2e9 !important; }
        .back-link:hover { color: #c44eff !important; }
        
        main { max-width: 650px; margin: 0 auto; padding: 20px 25px 100px; }
        .article-title { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 400; text-align: center; margin-bottom: 40px; padding-top: 20px; }
        .article-content { font-size: 18px; line-height: 1.8; }
        .article-content p { margin-bottom: 1.5em; }
        .article-content em { font-style: italic; }
        @media (max-width: 600px) { .article-title { font-size: 32px; } .article-content { font-size: 17px; } }
        
        .share-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(247,242,233,0.18); text-align: center; }
        .share-label { font-family: 'Caveat', cursive; font-size: 20px; margin-bottom: 15px; color: #c6b5c7; }
        .share-buttons { display: flex; justify-content: center; gap: 15px; }
        .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #231e20; border: 1px solid #c44eff; transition: all 0.2s; }
        .share-btn:hover { background: #c44eff; }
        .share-btn:hover svg { fill: #231e20 !important; }
        .share-btn svg { width: 18px; height: 18px; fill: #f7f2e9 !important; }
        
        .stukje-nav { margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(247,242,233,0.18); display: flex; justify-content: space-between; align-items: stretch; gap: 20px; font-family: 'Caveat', cursive; }
        .stukje-nav a { flex: 1; padding: 15px 18px; border: 1px solid #c44eff; border-radius: 12px; transition: all 0.2s; display: flex; flex-direction: column; gap: 4px; }
        .stukje-nav a:hover { background: #c44eff; color: #231e20 !important; }
        .stukje-nav a:hover .nav-title { color: #231e20 !important; }
        .stukje-nav .nav-label { font-size: 16px; color: #c6b5c7; }
        .stukje-nav .nav-title { font-family: 'Playfair Display', serif; font-size: 16px; color: #f7f2e9 !important; line-height: 1.3; }
        .stukje-nav .nav-prev { text-align: left; }
        .stukje-nav .nav-next { text-align: right; }
        .stukje-nav a:hover .nav-label { color: rgba(255,255,255,0.85); }
        .stukje-nav .nav-placeholder { flex: 1; }
        @media (max-width: 500px) { .stukje-nav .nav-title { font-size: 14px; } }
    
:root { --bg:#231e20; --ink:#f7f2e9; --accent:#c44eff; --lilac:#db9cfe; --muted:#c6b5c7; }
a:focus-visible {outline:2px solid var(--lilac);outline-offset:5px}
::selection {background:#71308f;color:var(--ink)}
.skip {position:absolute;top:-100px;left:20px;background:var(--bg);padding:10px;z-index:200}.skip:focus {top:10px}
mark {background:linear-gradient(to top,rgba(196,78,255,.42) 45%,transparent 45%);color:inherit;padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.listing header {max-width:700px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.listing main {max-width:700px}
.page-title {font-family:'Caveat',cursive;font-size:32px;font-weight:600}
.filters {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px}
.filters a {padding:7px 18px;border:1px solid var(--accent);border-radius:50px;font-size:16px}
.filters a[aria-current=page] {border-color:var(--lilac);background:rgba(196,78,255,.15);box-shadow:0 0 15px #c44eff40}
.filters a:hover {color:var(--lilac)}
.stukjes-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-bottom:40px}
.stukje-card {display:block}.stukje-card:hover .stukje-title {color:var(--lilac)}
.stukje-label {font-family:'Caveat',cursive;font-size:18px;letter-spacing:3px;border-bottom:1px solid var(--ink);display:inline-block;padding-bottom:3px;margin-bottom:12px}
.stukje-title {font-size:22px;font-weight:700;margin-bottom:8px;text-decoration:underline;text-decoration-color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px;display:block;line-height:1.6}
.stukje-meta {font-size:14px;color:var(--lilac)}
.article-meta {font-family:'Caveat',cursive;color:var(--lilac);font-size:20px;text-align:center;margin:0 0 30px}.article-meta a:hover {text-decoration:underline}
.article-title {line-height:1.4;overflow-wrap:break-word;margin-bottom:16px}
.empty {font-size:18px;color:var(--muted);margin:20px 0 50px}
.site-footer {display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-top:45px;padding-top:20px;border-top:1px solid rgba(247,242,233,.18);font:12px/1.7 Arial,sans-serif;color:var(--muted)}
@media(max-width:600px){.stukjes-grid {grid-template-columns:1fr;gap:35px}}
@media(prefers-reduced-motion:reduce){* {transition:none!important}}
.article-content h2 {font-size:25px;font-weight:700;line-height:1.4;margin:1.8em 0 1em;overflow-wrap:break-word}
@media(max-width:600px){.article-content h2 {font-size:22px}}
@media(max-width:500px){.stukje-nav {flex-direction:column}.stukje-nav .nav-next {text-align:left}}