-:root { --bg: #f6f7fb; --card: #ffffff; --fg: #0f172a; --muted: #475569; --ring: #94a3b8; --accent: #2563eb; }
-@media (prefers-color-scheme: dark) { :root { --bg: #0b0f1a; --card: #0f172a; --fg: #e5e7eb; --muted: #94a3b8; --ring: #334155; } }
-*{box-sizing:border-box} html,body{height:100%}
-body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--fg);background:radial-gradient(1200px 800px at 80% -10%, rgba(34,197,94,.08), transparent 50%),radial-gradient(800px 600px at -10% 10%, rgba(37,99,235,.08), transparent 50%),var(--bg)}
-.container{max-width:1100px;margin:0 auto;padding:32px 20px 48px}
-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
-.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
-.logo{width:36px;height:36px;border-radius:10px;background:#111;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
-.logo svg{width:22px;height:22px;fill:#fff}
-.title{font-weight:700;letter-spacing:.2px}
-.subtitle{color:var(--muted);font-size:.95rem}
-.search{width:100%;margin:18px 0 24px}
-.search input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--ring);background:var(--card);color:var(--fg)}
-.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
-.card{position:relative;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35));background-color:var(--card);border:1px solid var(--ring);padding:16px 14px 14px;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;box-shadow:0 6px 22px rgba(2,6,23,.18)}
-.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 28px rgba(37,99,235,.22)}
-.card h3{margin:0 0 6px;font-size:1rem}
-.card p{margin:0;color:var(--muted);font-size:.92rem}
-.chip{position:absolute;top:10px;right:10px;font-size:.75rem;border:1px solid var(--ring);padding:.1rem .5rem;border-radius:999px;color:var(--muted)}
-footer{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--muted);font-size:.9rem}
-.foot-links{display:flex;gap:12px;flex-wrap:wrap}
-.foot-links a{color:inherit;text-decoration:none;border-bottom:1px dashed var(--ring)}
+/* === zndr.dk — dark-first theme === */
+
+/* Core palette (dark) */
+:root {
+ --bg: #0b0f1a; /* page background */
+ --card: #111827; /* card background */
+ --fg: #e5e7eb; /* primary text */
+ --muted: #9aa4b2; /* secondary text */
+ --ring: #243244; /* borders / outlines */
+ --accent: #60a5fa; /* interactive accents (hover, focus) */
+ --accent-strong: #3b82f6;
+ --shadow: rgba(0,0,0,0.45);
+}
+
+/* Global */
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+ margin: 0;
+ font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+ color: var(--fg);
+ background: var(--bg);
+}
+
+/* Layout */
+.container { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
+header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 28px; }
+.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color: inherit; }
+.logo { width:36px; height:36px; border-radius:10px; background: #0f172a; display:grid; place-items:center; box-shadow: 0 8px 24px var(--shadow); }
+.logo svg { width:22px; height:22px; fill:#fff; }
+.title { font-weight: 700; letter-spacing: .2px; }
+.subtitle { color: var(--muted); font-size: 0.95rem; }
+
+/* Search */
+.search { width:100%; margin:18px 0 24px; }
+.search input {
+ width:100%;
+ padding:12px 14px;
+ border-radius:12px;
+ border:1px solid var(--ring);
+ background: #0f172a;
+ color: var(--fg);
+ outline: none;
+}
+.search input:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
+}
+
+/* Grid + Cards */
+.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
+
+.card {
+ position: relative;
+ border-radius: 14px;
+ background: var(--card);
+ border: 1px solid var(--ring);
+ padding: 16px 14px 14px;
+ text-decoration: none;
+ color: inherit;
+ transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
+ box-shadow: 0 8px 24px var(--shadow);
+}
+.card:hover {
+ transform: translateY(-2px);
+ border-color: var(--accent);
+ box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 20%, #000 60%);
+}
+.card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--fg); }
+.card p { margin: 0; font-size: .95rem; color: var(--muted); }
+
+.chip {
+ position:absolute; top:10px; right:10px;
+ font-size: .75rem;
+ border:1px solid var(--ring);
+ padding:.1rem .5rem;
+ border-radius:999px;
+ color: color-mix(in oklab, var(--fg) 80%, #fff 0%);
+ background: #0f172a;
+}
+
+/* Links in footer/content */
+a { color: var(--accent); }
+a:hover { color: var(--accent-strong); }
+
+/* Footer */
+footer {
+ margin-top: 36px; display:flex; gap:12px; flex-wrap:wrap;
+ align-items:center; justify-content:space-between;
+ color: var(--muted); font-size:.9rem;
+}
+.foot-links { display:flex; gap:12px; flex-wrap:wrap; }
+.foot-links a { color: inherit; text-decoration: none; border-bottom:1px dashed var(--ring); }
+.foot-links a:hover { color: var(--fg); border-bottom-color: var(--accent); }
+
+/* Focus-visible for keyboard users */
+:where(a, input).focus-visible, :where(a, input):focus-visible {
+ outline: 3px solid var(--accent);
+ outline-offset: 2px;
+ border-radius: 10px;
+}
+
+/* --- Optional light-mode fallback (in case your OS/browser is in light mode) --- */
+@media (prefers-color-scheme: light) {
+ :root {
+ --bg: #f6f7fb;
+ --card: #ffffff;
+ --fg: #0f172a;
+ --muted: #475569;
+ --ring: #cbd5e1;
+ --accent: #2563eb;
+ --accent-strong: #1d4ed8;
+ --shadow: rgba(2, 6, 23, .18);
+ }
+ .search input { background: #ffffff; }
+}