:root{ --bg: #0b0d12; --panel: #0f1220; --text: #e5e7eb; --muted: #94a3b8; --accent: #72f1b8; --border: #1f2837; --code-bg: #0b1323; --inline-bg: #0e1726;} [data-theme='light']{ --bg: #f7fafc; --panel: #ffffff; --text: #0f172a; --muted: #475569; --accent: #0ea5e9; --border: #e2e8f0; --code-bg: #f1f5f9; --inline-bg: #eef2f7;} *{ box-sizing: border-box;} html, body{ height: 100%;} body{ margin: 0; background: var(--bg); color: var(--text); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} body::before{ content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px); background-size: 16px 16px; opacity: 0.08; pointer-events: none; z-index: 0;} .container{ max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; position: relative; z-index: 1;} header{ padding: 16px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px;} .site-title{ color: var(--accent); text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: 0.2px;} .site-title::before{ content: "$ "; color: var(--muted);} .site-title:hover{ text-shadow: 0 0 8px rgba(114, 241, 184, 0.3);} nav{ margin-top: 6px; display: flex; gap: 16px;} nav a{ color: var(--muted); text-decoration: none; font-size: 16px;} nav a:hover{ color: var(--text);} a:focus-visible, button:focus-visible, input:focus-visible{ outline: 2px dashed var(--accent); outline-offset: 2px;} .theme-toggle{ margin-left: auto; border: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 16px; padding: 2px 6px; border-radius: 4px; cursor: pointer;} .theme-toggle:hover{ color: var(--text); border-color: var(--muted);} .theme-toggle:focus{ outline: 2px dashed var(--accent); outline-offset: 2px;} main{ padding-top: 8px;} .section-title{ color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px;} .list{ border-top: 1px dashed var(--border);} .post{ display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border);} .post-title{ flex: 1;} .post a{ color: var(--text); text-decoration: none;} .post a:hover{ color: var(--accent); text-shadow: 0 0 8px rgba(114, 241, 184, 0.3);} .post-date{ color: var(--muted); font-size: 12px;} .post-date::before{ content: "["; color: var(--border); margin-right: 2px;} .post-date::after{ content: "]"; color: var(--border); margin-left: 2px;} article h1{ font-size: 20px; font-weight: 600; line-height: 1.35; margin: 0 0 16px; color: var(--text);} article h2{ font-size: 16px; font-weight: 600; line-height: 1.4; margin: 18px 0 10px; color: var(--text);} article h3{ font-size: 14px; font-weight: 600; line-height: 1.4; margin: 14px 0 8px; color: var(--text);} article p{ margin: 10px 0 12px;} article a{ color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent);} article a:hover{ color: var(--text); border-color: var(--text);} code, pre, kbd, samp{ font-family: 'JetBrains Mono', ui-monospace, monospace;} code{ background: var(--inline-bg); padding: 2px 4px; border-radius: 3px; border: 1px solid var(--border); color: #9be9a8; font-size: 12.5px;} pre{ background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px; overflow-x: auto; margin: 12px 0;} pre code{ background: transparent; border: 0; color: var(--text);} blockquote{ border-left: 2px solid var(--border); padding-left: 12px; margin: 12px 0; color: var(--muted);} ul, ol{ padding-left: 20px; margin: 10px 0 12px;} li{ margin: 4px 0;} table{ width: 100%; border-collapse: collapse; margin: 12px 0; border: 1px solid var(--border); font-size: 13px;} th, td{ padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border);} th{ color: var(--muted); font-weight: 600; background: rgba(255,255,255,0.02);} footer{ padding: 12px 0 0; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 12px; margin-top: 24px;} .skip-link{ position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;} .skip-link:focus{ position: static; width: auto; height: auto; display: inline-block; background: var(--panel); color: var(--text); padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;} .search{ width: 100%; margin: 8px 0 12px; padding: 6px 8px; border: 1px solid var(--border); background: var(--inline-bg); color: var(--text); border-radius: 4px; font: inherit; font-size: 14px;} .post--active{ background: rgba(114,241,184,0.08);} .h-mark{ margin-left: 8px; color: var(--muted); text-decoration: none; visibility: hidden;} article h2:hover .h-mark, article h3:hover .h-mark{ visibility: visible;} #toc{ border: 1px dashed var(--border); padding: 10px; border-radius: 6px; background: var(--panel); margin: 8px 0 16px;} .toc-list{ list-style: none; padding-left: 0;} .toc-list li{ margin: 4px 0;} .copy-btn{ border: 1px solid var(--border); background: rgba(0,0,0,0.2); color: var(--muted); font: inherit; font-size: 12px; padding: 2px 6px; border-radius: 4px; cursor: pointer;} .copy-btn:hover{ color: var(--text); border-color: var(--muted);} .back-to-top{ position: fixed; right: 16px; bottom: 16px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--muted); text-decoration: none; opacity: 0; transition: opacity .2s ease;} .back-to-top:hover{ color: var(--text);} .term-404{ background: var(--code-bg); border: 1px solid var(--border); padding: 16px; border-radius: 6px;} @media (max-width: 640px){ .container{ padding: 16px 12px 28px;} .post{ flex-direction: column; align-items: flex-start; gap: 4px;} }