:root{
  /* dark theme (default) */
  --bg:#0a0e17;--bg-elevated:#131a29;--border:#232d42;
  --text:#e8ecf3;--text-muted:#94a3b8;
  --commons:#34b787;--signal:#f5a524;
  --header-grad-1:#0b1f3a;--header-grad-2:#123a63;
  --code-bg:#1c2740;--code-text:#e8ecf3;
  --card-shadow:rgba(0,0,0,.35);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f7f8fa;--bg-elevated:#ffffff;--border:#e6e9ee;
  --text:#0b1f3a;--text-muted:#475569;
  --commons:#1f7a5a;--signal:#b86e00;
  --header-grad-1:#0b1f3a;--header-grad-2:#123a63;
  --code-bg:#0b1f3a;--code-text:#fff;
  --card-shadow:rgba(11,31,58,.08);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.55;transition:background .2s ease,color .2s ease}
.skip{position:absolute;left:-9999px;top:0;background:var(--commons);color:#fff;padding:8px 14px;border-radius:0 0 6px 0;z-index:10}
.skip:focus{left:0}
header{position:relative;background:linear-gradient(135deg,var(--header-grad-1),var(--header-grad-2));color:#fff;padding:72px 24px;text-align:center}
header h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2em 0;line-height:1.15}
header p{font-size:1.2rem;max-width:680px;margin:0 auto;opacity:.92}
.badge{display:inline-block;margin-top:18px;background:#1f7a5a;color:#fff;padding:8px 16px;border-radius:6px;font-weight:700;letter-spacing:.3px}
main{max-width:980px;margin:0 auto;padding:40px 24px}
h2{color:var(--commons);margin-top:48px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0 0;padding:0;list-style:none}
.card{display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:18px;transition:transform .12s ease,box-shadow .12s,background .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--card-shadow)}
.card .code{font:600 .8rem/1 ui-monospace,monospace;color:var(--signal)}
.card h3{margin:.3em 0 .2em;font-size:1.05rem;color:var(--text)}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{margin:0;color:var(--text-muted);font-size:.92rem}
.card .links{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem}
code{background:var(--code-bg);color:var(--code-text);padding:2px 6px;border-radius:4px;font-size:.85em;overflow-wrap:anywhere}
pre{background:var(--code-bg);color:var(--code-text);padding:14px 16px;border-radius:8px;overflow-x:auto;font-size:.85rem;line-height:1.5}
pre code{padding:0;background:none}
footer{text-align:center;padding:40px 24px;color:var(--text-muted);font-size:.9rem}
footer p{margin:.3em 0}
a{color:var(--commons)}
a:focus-visible,input:focus-visible+.track{outline:2px solid var(--signal);outline-offset:2px}

/* theme toggle: left = dark (default), right = light */
.theme-toggle{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.theme-toggle input{position:absolute;opacity:0;width:0;height:0}
.theme-toggle .icon{line-height:1;font-size:.95rem;pointer-events:none;opacity:.85}
.theme-toggle .track{position:relative;width:44px;height:24px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:999px;transition:background .2s ease;flex:none}
.theme-toggle .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.theme-toggle input:checked ~ .track .thumb{transform:translateX(20px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.card:hover{transform:none}}