Update README.md

README.md

@@ -19,36 +19,103 @@ tags:
 ---
 
 <style>
+/* Theme-aware design tokens (light by default) */
 :root{
+  color-scheme: light dark;
+
+  /* LIGHT */
+  --bg: #ffffff;
+  --panel: #f6f8fc;
+  --ink: #0b0c0f;
+  --muted: #556070;
+  --tagline: #2a3b6b;             /* nicer on light bg */
+  --brand: #3f6fff;               /* indigo */
+  --brand-2: #22e3bb;             /* mint accent */
+  --border: rgba(2, 6, 23, .08);
+  --glow: rgba(63, 111, 255, .22);
+  --radius: 16px;
+
+  /* component-specific light defaults */
+  --kbd-bg: #eef2ff;
+  --kbd-ink: #233876;
+  --kbd-b1: #c8d4ff;
+  --kbd-b2: #b6c6ff;
+
+  --code-bg: #f4f6fb;
+  --code-bd: #e3e9f3;
+
+  --bq-bg: rgba(63,111,255,.07);
+  --bq-ink: #1b264f;
+}
+
+/* DARK overrides via OS preference */
+@media (prefers-color-scheme: dark) {
+  :root{
+    --bg: #0b0c0f;
+    --panel: #0f1117;
+    --ink: #e9eefc;
+    --muted: #9aa3b2;
+    --tagline: #c6d5ff;
+    --brand: #5b8cff;
+    --brand-2: #4ef2c8;
+    --border: rgba(255,255,255,.08);
+    --glow: rgba(91,140,255,.25);
+
+    --kbd-bg: #0c1322;
+    --kbd-ink: #cfe0ff;
+    --kbd-b1: #1a2742;
+    --kbd-b2: #142138;
+
+    --code-bg: #0b1220;
+    --code-bd: #15233d;
+
+    --bq-bg: rgba(91,140,255,.06);
+    --bq-ink: #cfe0ff;
+  }
+}
+
+/* DARK overrides via site toggle (HF uses html[data-theme]) */
+html[data-theme="dark"], body[data-theme="dark"]{
   --bg: #0b0c0f;
   --panel: #0f1117;
   --ink: #e9eefc;
   --muted: #9aa3b2;
-  --brand: #5b8cff; /* soft indigo */
-  --brand-2: #4ef2c8; /* mint accent */
+  --tagline: #c6d5ff;
+  --brand: #5b8cff;
+  --brand-2: #4ef2c8;
   --border: rgba(255,255,255,.08);
   --glow: rgba(91,140,255,.25);
-  --radius: 16px;
+
+  --kbd-bg: #0c1322;
+  --kbd-ink: #cfe0ff;
+  --kbd-b1: #1a2742;
+  --kbd-b2: #142138;
+
+  --code-bg: #0b1220;
+  --code-bd: #15233d;
+
+  --bq-bg: rgba(91,140,255,.06);
+  --bq-ink: #cfe0ff;
 }
+
 *{ box-sizing: border-box }
+
+/* Cards & layout */
 .card{
-  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));
+  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
   border:1px solid var(--border);
   border-radius: var(--radius);
   padding:24px;
 }
-.badge{
-  display:inline-flex;align-items:center;gap:.5rem;
-  padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;
-  color:var(--muted);font-size:.85rem
-}
 .grid{ display:grid; gap:18px }
 .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
 @media(max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr } }
+
+/* Text */
 .kicker{
-  display:inline-block;letter-spacing:.12em;text-transform:uppercase;
-  color:var(--muted);font-size:.75rem;margin-bottom:.5rem
+  display:inline-block; letter-spacing:.12em; text-transform:uppercase;
+  color:var(--muted); font-size:.75rem; margin-bottom:.5rem;
 }
 h1,h2,h3{ color:var(--ink); margin:0 0 .4rem 0; line-height:1.1 }
 h1{ font-size:2.25rem; font-weight:800 }
@@ -56,62 +123,82 @@ h2{ font-size:1.3rem; font-weight:700 }
 h3{ font-size:1.05rem; font-weight:700 }
 p,li{ color:var(--muted); line-height:1.6 }
 hr{ border:none; height:1px; background:var(--border); margin:28px 0 }
+.tagline{ font-size:1.05rem; color:var(--tagline) }
+
+/* Buttons */
 a.btn{
   display:inline-block; padding:.7rem 1rem; border-radius:12px;
-  background: linear-gradient(180deg,var(--brand),#3f6fff);
-  color:white; text-decoration:none; font-weight:600;
+  background: linear-gradient(180deg, var(--brand), #3f6fff);
+  color:#fff; text-decoration:none; font-weight:600;
   box-shadow: 0 10px 30px var(--glow);
 }
 a.btn.ghost{
-  background:transparent; color:var(--ink); border:1px solid var(--border)
+  background:transparent; color:var(--ink); border:1px solid var(--border);
 }
+
+/* KBD */
 kbd{
-  background:#0c1322;color:#cfe0ff;border:1px solid #1a2742;border-bottom-color:#142138;
-  padding:.12rem .4rem;border-radius:6px;font-size:.85rem
+  background:var(--kbd-bg); color:var(--kbd-ink);
+  border:1px solid var(--kbd-b1); border-bottom-color:var(--kbd-b2);
+  padding:.12rem .4rem; border-radius:6px; font-size:.85rem;
 }
+
+/* Code blocks */
 .codeblock{
-  background:#0b1220;border:1px solid #15233d;border-radius:12px;padding: 8px;overflow:auto; /* Changed padding */
-  margin: 1rem 0;
-}
-.codeblock pre {
-  margin: 0;
+  background:var(--code-bg); border:1px solid var(--code-bd);
+  border-radius:12px; padding:14px; overflow:auto; color:var(--ink);
 }
-.tagline{
-  font-size:1.05rem;color:#c6d5ff
+
+/* Pills / badges */
+.badge{
+  display:inline-flex; align-items:center; gap:.5rem;
+  padding:.35rem .6rem; border:1px solid var(--border);
+  border-radius:999px; color:var(--muted); font-size:.85rem;
 }
 .pill{
-  display:inline-flex;align-items:center;gap:.4rem;
-  padding:.35rem .6rem;border-radius:999px;border:1px dashed var(--border);color:#b9c5db
+  display:inline-flex; align-items:center; gap:.4rem;
+  padding:.35rem .6rem; border-radius:999px;
+  border:1px dashed var(--border); color:var(--muted);
 }
+
+/* Hero */
 .hero{
   background:
-    radial-gradient(600px 240px at 20% 0%,rgba(91,140,255,.18),transparent 60%),
-    radial-gradient(600px 240px at 80% 10%,rgba(78,242,200,.12),transparent 60%);
+    radial-gradient(600px 240px at 20% 0%, rgba(91,140,255,.14), transparent 60%),
+    radial-gradient(600px 240px at 80% 10%, rgba(78,242,200,.10), transparent 60%);
   border:1px solid var(--border);
-  border-radius:20px; padding:28px
+  border-radius:20px; padding:28px;
 }
+
+/* Media */
 figure.screens{
-  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0 0
+  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
+  gap:10px; margin:16px 0 0 0;
 }
 figure.screens img{
-  width:100%;border-radius:12px;border:1px solid var(--border)
+  width:100%; border-radius:12px; border:1px solid var(--border);
 }
+
+/* Details / blockquote / tables */
 details{
-  border:1px solid var(--border);border-radius:12px;padding:14px;background:rgba(255,255,255,.02)
+  border:1px solid var(--border); border-radius:12px;
+  padding:14px; background:rgba(255,255,255,.02);
 }
-summary{ cursor:pointer;color:var(--ink);font-weight:700 }
+summary{ cursor:pointer; color:var(--ink); font-weight:700 }
 blockquote{
-  margin:0;padding:14px;border-left:3px solid var(--brand);background:rgba(91,140,255,.06);
-  border-radius:0 10px 10px 0;color:#cfe0ff
+  margin:0; padding:14px; border-left:3px solid var(--brand);
+  background:var(--bq-bg); border-radius:0 10px 10px 0; color:var(--bq-ink);
 }
 table{ width:100%; border-collapse:collapse }
 th,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); color:var(--muted) }
-th{ color:#e7edff }
+th{ color:var(--ink) }
+
+/* Callouts */
 .callout{
-  border:1px solid var(--border);border-radius:14px;padding:14px;background:rgba(255,255,255,.02)
+  border:1px solid var(--border); border-radius:14px;
+  padding:14px; background:rgba(255,255,255,.02);
 }
 </style>
-
 <div style="background:var(--bg); padding: 28px; border-radius: 18px">
 
 <div class="hero">