/*
Theme Name: CodeAI Hub Amber
Theme URI: https://example.com/codeaihub-amber
Author: Arena.ai Agent
Description: 深色琥珀风格的 CodeAI Hub WordPress 主题，包含首页、AI 工具、课程、开源项目、作者、分类、搜索、会员和投稿等模板。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codeaihub-amber
Tags: blog, education, portfolio, custom-menu, featured-images, full-width-template, block-styles
*/

/*
Theme Name: CodeAI Hub
Theme URI: https://example.com/codeaihub
Author: Arena.ai Agent
Author URI: https://arena.ai
Description: 面向编程爱好者、开源社区、编程学员与 AI 工具/代码开发者的现代 WordPress 主题首页。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codeaihub
Tags: blog, education, portfolio, one-column, custom-logo, custom-menu, featured-images, full-width-template
*/

:root {
  --bg: #070b18;
  --bg-2: #0b1224;
  --panel: rgba(255, 255, 255, .075);
  --panel-2: rgba(255, 255, 255, .105);
  --text: #eef5ff;
  --muted: #9fb0ca;
  --line: rgba(255, 255, 255, .14);
  --primary: #6ee7ff;
  --primary-2: #8b5cf6;
  --accent: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --radius: 24px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .35);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 5%, rgba(110,231,255,.24), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(139,92,246,.24), transparent 28%),
    radial-gradient(circle at 50% 80%, rgba(52,211,153,.12), transparent 30%),
    linear-gradient(180deg, #060914 0%, #0b1020 45%, #070b18 100%);
  min-height: 100vh;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(7, 11, 24, .76);
  border-bottom: 1px solid var(--line);
}
.navbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 850; letter-spacing: -.03em; font-size: 21px; }
.logo-mark {
  width: 40px; height: 40px; display:grid; place-items:center; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 30px rgba(110,231,255,.22);
}
.nav-menu { display:flex; list-style:none; padding:0; margin:0; gap: 8px; align-items:center; }
.nav-menu a { color: var(--muted); padding: 10px 12px; border-radius: 999px; font-size: 14px; transition: .2s ease; }
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.08); }
.header-actions { display:flex; align-items:center; gap: 10px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border:1px solid var(--line);
  background: rgba(255,255,255,.06); color: var(--text); font-weight: 700; transition:.2s ease; cursor:pointer;
}
.btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.11); }
.btn-primary { border:0; color:#06101f; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 16px 45px rgba(110,231,255,.2); }
.btn-purple { border:0; background: linear-gradient(135deg, var(--primary-2), #ec4899); }
.mobile-toggle { display:none; }
.hero { position: relative; overflow:hidden; padding: 92px 0 70px; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items:center; }
.kicker { display:inline-flex; align-items:center; gap: 8px; color: var(--primary); background: rgba(110,231,255,.08); border:1px solid rgba(110,231,255,.22); padding: 8px 13px; border-radius: 999px; font-weight: 750; font-size: 14px; }
h1 { margin: 20px 0 18px; font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -.07em; }
.gradient-text { background: linear-gradient(135deg, #fff 0%, var(--primary) 38%, #a78bfa 68%, #34d399 100%); -webkit-background-clip:text; background-clip:text; color: transparent; }
.hero p { color: var(--muted); font-size: 18px; max-width: 660px; margin:0 0 28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-bottom: 28px; }
.trust-row { display:flex; flex-wrap:wrap; gap: 14px; color: var(--muted); font-size: 14px; }
.trust-row span { display:inline-flex; align-items:center; gap:7px; }
.visual-card {
  position: relative; border:1px solid var(--line); border-radius: 30px; padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: var(--shadow); overflow:hidden;
}
.visual-card::before { content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 30% 0%, rgba(110,231,255,.25), transparent 35%); pointer-events:none; }
.window-bar { height: 42px; display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid var(--line); position:relative; }
.dot { width:12px; height:12px; border-radius:50%; background: var(--danger); } .dot:nth-child(2){background:var(--warn)} .dot:nth-child(3){background:var(--accent)}
.code-window { position:relative; background: rgba(2,6,23,.7); border:1px solid rgba(255,255,255,.1); border-radius: 22px; overflow:hidden; }
pre { margin:0; padding: 24px; overflow:auto; color:#dbeafe; font-size: 14px; line-height:1.7; }
.token-a { color:#6ee7ff; } .token-b { color:#c4b5fd; } .token-c { color:#86efac; } .token-d { color:#fda4af; }
.float-chip { position:absolute; right:22px; bottom:24px; border:1px solid var(--line); background: rgba(7,11,24,.86); backdrop-filter: blur(12px); border-radius:18px; padding:14px 16px; box-shadow: var(--shadow); }
.float-chip strong { display:block; font-size:24px; color:var(--accent); line-height:1; }
.section { padding: 74px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom: 28px; }
.section-title { max-width: 760px; }
h2 { margin:0 0 10px; font-size: clamp(30px, 4vw, 48px); line-height:1.06; letter-spacing:-.045em; }
.section-title p { margin:0; color:var(--muted); font-size:17px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.card { border:1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 24px; transition:.2s ease; position:relative; overflow:hidden; }
.card:hover { transform: translateY(-5px); background: var(--panel-2); border-color: rgba(110,231,255,.35); }
.icon { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:rgba(110,231,255,.12); color:var(--primary); font-size:24px; margin-bottom:16px; }
.card h3 { margin:0 0 8px; font-size:21px; letter-spacing:-.02em; }
.card p { margin:0; color:var(--muted); }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.badge { border:1px solid var(--line); background:rgba(255,255,255,.06); color:#cfe2ff; padding:6px 10px; border-radius:999px; font-size:12px; }
.feature-panel { display:grid; grid-template-columns: .9fr 1.1fr; gap:20px; align-items:stretch; }
.tool-list { display:grid; gap:12px; }
.tool-item { display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.055); }
.tool-icon { flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg, rgba(110,231,255,.2), rgba(139,92,246,.2)); }
.tool-item h4 { margin:0 0 4px; }
.tool-item p { margin:0; color:var(--muted); font-size:14px; }
.terminal { min-height:100%; border:1px solid var(--line); border-radius: var(--radius); background:#050816; overflow:hidden; box-shadow:var(--shadow); }
.terminal .line { display:block; color:#94a3b8; } .terminal .ok { color:#86efac; } .terminal .cmd { color:#6ee7ff; } .terminal .warn { color:#fbbf24; }
.path { counter-reset: step; display:grid; gap:14px; }
.path-item { counter-increment: step; display:grid; grid-template-columns: 58px 1fr; gap:16px; align-items:start; padding:20px; border:1px solid var(--line); background:rgba(255,255,255,.06); border-radius:22px; }
.path-item::before { content: counter(step); width:48px; height:48px; border-radius:18px; display:grid; place-items:center; font-weight:900; color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); }
.path-item h3 { margin:0 0 5px; } .path-item p { margin:0; color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat { text-align:center; padding:26px 16px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.07); }
.stat strong { display:block; font-size:36px; line-height:1; background:linear-gradient(135deg, #fff, var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span { color:var(--muted); font-size:14px; }
.cta { padding:46px; border-radius:32px; border:1px solid rgba(110,231,255,.25); background: linear-gradient(135deg, rgba(110,231,255,.16), rgba(139,92,246,.14), rgba(52,211,153,.09)); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cta h2 { margin-bottom:8px; } .cta p { color:var(--muted); margin:0; }
.newsletter { display:flex; gap:10px; min-width:min(460px,100%); }
.newsletter input { flex:1; min-height:48px; border-radius:999px; border:1px solid var(--line); background:rgba(2,6,23,.5); color:var(--text); padding:0 16px; outline:none; }
.site-footer { border-top:1px solid var(--line); padding:32px 0; color:var(--muted); }
.footer-row { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; }

@media (max-width: 920px) {
  .hero-grid, .feature-panel { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .stats { grid-template-columns: repeat(2, 1fr); }
  .nav-menu { display:none; position:absolute; left:20px; right:20px; top:76px; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:20px; background:rgba(7,11,24,.96); }
  .nav-menu.is-open { display:flex; }
  .mobile-toggle { display:inline-flex; }
  .header-actions .btn-primary { display:none; }
  .cta { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px) {
  .container { width:min(calc(100% - 28px), var(--container)); }
  .hero { padding-top:58px; }
  .grid-3, .grid-4, .stats { grid-template-columns: 1fr; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .newsletter { flex-direction:column; width:100%; }
  pre { font-size:12px; padding:18px; }
  .cta { padding:28px; }
}

/* ===== Premium international homepage upgrade ===== */
.hero-xl { padding: 116px 0 92px; isolation: isolate; }
.hero-orbit { position:absolute; border:1px solid rgba(110,231,255,.18); border-radius:50%; pointer-events:none; z-index:-1; }
.orbit-one { width:580px; height:580px; right:-180px; top:30px; box-shadow: inset 0 0 80px rgba(110,231,255,.08); }
.orbit-two { width:380px; height:380px; left:-160px; bottom:-120px; box-shadow: inset 0 0 60px rgba(139,92,246,.1); }
.hero-grid-xl { grid-template-columns: .95fr 1.05fr; }
.hero-lead { font-size:20px !important; max-width:720px !important; }
.brand-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:28px; color:var(--muted); }
.brand-strip span { font-size:13px; text-transform:uppercase; letter-spacing:.12em; }
.brand-strip b { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.055); font-size:13px; color:#dbeafe; }
.hero-dashboard { position:relative; min-height:560px; }
.dash-card { border:1px solid rgba(255,255,255,.16); border-radius:32px; padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); box-shadow:0 30px 100px rgba(0,0,0,.42); backdrop-filter:blur(16px); }
.main-dash { position:absolute; inset:34px 18px 72px 18px; }
.dash-top { display:flex; justify-content:space-between; align-items:center; padding:5px 8px 16px; color:#dbeafe; font-weight:800; }
.dash-top em { color:#06101f; background:var(--accent); border-radius:999px; padding:4px 10px; font-size:12px; font-style:normal; }
.compact pre { min-height:390px; }
.mini-card { position:absolute; z-index:3; border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:16px 18px; background:rgba(7,11,24,.82); backdrop-filter:blur(14px); box-shadow:0 22px 70px rgba(0,0,0,.38); }
.mini-card strong { display:block; font-size:30px; line-height:1; background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mini-card span { color:var(--muted); font-size:13px; }
.mini-a { left:0; top:0; } .mini-b { right:0; bottom:24px; } .mini-c { left:40px; bottom:0; }
.section-tight { padding: 20px 0 54px; }
.global-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:14px; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.065); }
.global-stats div { padding:20px 14px; text-align:center; border-radius:20px; background:rgba(2,6,23,.32); }
.global-stats strong { display:block; font-size:30px; line-height:1; color:#fff; letter-spacing:-.04em; }
.global-stats span { color:var(--muted); font-size:13px; }
.rich-grid .rich-card:nth-child(2) .icon { background:rgba(139,92,246,.14); color:#c4b5fd; }
.rich-grid .rich-card:nth-child(3) .icon { background:rgba(52,211,153,.13); color:#86efac; }
.rich-grid .rich-card:nth-child(4) .icon { background:rgba(251,191,36,.12); color:#fde68a; }
.tool-matrix { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; }
.tool-tile { min-height:210px; border:1px solid var(--line); border-radius:26px; padding:24px; background:rgba(255,255,255,.065); position:relative; overflow:hidden; }
.tool-tile:before { content:""; position:absolute; width:180px; height:180px; right:-80px; top:-80px; border-radius:50%; background:rgba(110,231,255,.12); }
.tool-tile.featured { grid-row:span 2; background:linear-gradient(135deg, rgba(110,231,255,.18), rgba(139,92,246,.12)); }
.tool-tile span { display:inline-flex; margin-bottom:42px; color:var(--primary); font-weight:900; letter-spacing:.14em; }
.tool-tile h3 { margin:0 0 10px; font-size:24px; letter-spacing:-.03em; }
.tool-tile p { color:var(--muted); margin:0; }
.dark-panel { margin:40px 0; background:linear-gradient(135deg, rgba(2,6,23,.72), rgba(15,23,42,.36)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-panel-wide { grid-template-columns:1fr 1fr; }
.large-muted { color:var(--muted); font-size:18px; }
.repo-list { display:grid; gap:12px; margin-top:24px; }
.repo-item { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.06); }
.repo-item h4 { margin:0 0 4px; } .repo-item p { margin:0; color:var(--muted); }
.repo-item span { color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; }
.open-source-board { border:1px solid rgba(110,231,255,.22); border-radius:30px; padding:22px; background:rgba(255,255,255,.07); box-shadow:var(--shadow); }
.board-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.board-head em { font-style:normal; color:var(--accent); font-size:13px; }
.issue { display:grid; grid-template-columns:130px 1fr 82px; gap:10px; align-items:center; padding:15px; border-radius:17px; background:rgba(2,6,23,.38); margin-bottom:10px; border:1px solid rgba(255,255,255,.08); }
.issue b { color:var(--primary); font-size:13px; } .issue span { color:#dbeafe; } .issue i { font-style:normal; color:var(--muted); font-size:12px; text-align:right; }
.academy-layout { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.path-card { border:1px solid var(--line); border-radius:26px; padding:24px; background:rgba(255,255,255,.065); }
.path-card.active { background:linear-gradient(180deg, rgba(110,231,255,.18), rgba(255,255,255,.06)); border-color:rgba(110,231,255,.32); }
.path-card span { color:var(--primary); font-weight:850; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.path-card h3 { margin:18px 0 10px; font-size:23px; line-height:1.15; }
.path-card p { color:var(--muted); }
meter { width:100%; height:10px; margin-top:18px; } meter::-webkit-meter-bar { background:rgba(255,255,255,.12); border:0; border-radius:999px; } meter::-webkit-meter-optimum-value { background:linear-gradient(90deg, var(--primary), var(--accent)); border-radius:999px; }
.showcase-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; }
.showcase-card { min-height:240px; border:1px solid var(--line); border-radius:28px; padding:26px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045)); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }
.showcase-card:after { content:""; position:absolute; inset:auto -60px -80px auto; width:220px; height:220px; border-radius:50%; background:rgba(139,92,246,.13); }
.showcase-card.large { grid-row:span 2; min-height:496px; background:linear-gradient(135deg, rgba(110,231,255,.16), rgba(139,92,246,.14)); }
.showcase-meta { color:var(--primary); font-size:13px; font-weight:850; text-transform:uppercase; letter-spacing:.12em; }
.showcase-card h3 { font-size:28px; line-height:1.1; letter-spacing:-.04em; margin:18px 0 12px; }
.showcase-card p { color:var(--muted); margin:0; }
.showcase-footer { display:flex; gap:10px; flex-wrap:wrap; color:#dbeafe; }
.showcase-footer span { padding:8px 12px; border:1px solid var(--line); border-radius:999px; }
.resource-section { background:radial-gradient(circle at 15% 50%, rgba(110,231,255,.12), transparent 35%); }
.terminal-xl pre { min-height:420px; }
.resource-list { display:grid; gap:12px; margin-top:22px; }
.resource-list a { display:flex; flex-direction:column; gap:4px; padding:18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.06); }
.resource-list a:hover { border-color:rgba(110,231,255,.36); transform:translateY(-2px); }
.resource-list span { color:var(--muted); }
.cta-xl { align-items:stretch; }
.cta-xl .newsletter { align-self:center; }
@media (max-width: 1050px) { .global-stats, .academy-layout { grid-template-columns:repeat(2,1fr); } .tool-matrix, .showcase-grid { grid-template-columns:1fr 1fr; } .tool-tile.featured, .showcase-card.large { grid-row:auto; } }
@media (max-width: 920px) { .hero-dashboard { min-height:520px; } .main-dash { inset:20px 0 80px; } .feature-panel-wide { grid-template-columns:1fr; } }
@media (max-width: 680px) { .global-stats, .academy-layout, .tool-matrix, .showcase-grid { grid-template-columns:1fr; } .issue { grid-template-columns:1fr; } .issue i { text-align:left; } .mini-card { position:relative; inset:auto !important; display:inline-block; margin:8px; } .hero-dashboard { min-height:auto; } .main-dash { position:relative; inset:auto; } }

/* ===== Detailed editorial, community and mega footer sections ===== */
.editorial-section { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(110,231,255,.035)); }
.editorial-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-bottom:24px; }
.featured-post-card { display:grid; grid-template-columns:.9fr 1.1fr; min-height:420px; border:1px solid rgba(110,231,255,.22); border-radius:32px; overflow:hidden; background:rgba(255,255,255,.07); box-shadow:var(--shadow); }
.post-cover { position:relative; min-height:280px; background:radial-gradient(circle at 30% 20%, rgba(110,231,255,.42), transparent 32%), radial-gradient(circle at 70% 70%, rgba(139,92,246,.38), transparent 30%), linear-gradient(135deg, #0f172a, #111827); }
.post-cover:after { content:"</>"; position:absolute; inset:0; display:grid; place-items:center; font-size:92px; font-weight:950; color:rgba(255,255,255,.16); letter-spacing:-.08em; }
.post-cover span { position:absolute; left:20px; top:20px; z-index:2; padding:8px 12px; border-radius:999px; color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); font-weight:900; }
.post-body { padding:32px; display:flex; flex-direction:column; justify-content:center; }
.post-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.post-tags span, .post-category { color:var(--primary); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.featured-post-card h3 { font-size:34px; line-height:1.08; margin:0 0 14px; letter-spacing:-.045em; }
.featured-post-card p { color:var(--muted); margin:0 0 20px; }
.post-meta { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.post-side-list { display:grid; gap:12px; }
.post-side-list article { display:grid; grid-template-columns:54px 1fr; gap:14px; padding:19px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.06); }
.post-side-list span { width:44px; height:44px; border-radius:16px; display:grid; place-items:center; color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); font-weight:950; }
.post-side-list b { display:block; font-size:17px; margin-bottom:5px; } .post-side-list p { margin:0; color:var(--muted); font-size:14px; }
.content-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 18px; }
.content-tabs a { padding:10px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.05); font-weight:750; }
.content-tabs a.active, .content-tabs a:hover { color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); border-color:transparent; }
.latest-post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.post-card { border:1px solid var(--line); border-radius:26px; overflow:hidden; background:rgba(255,255,255,.065); transition:.2s ease; }
.post-card:hover { transform:translateY(-5px); border-color:rgba(110,231,255,.34); }
.post-thumb { height:150px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(110,231,255,.2), rgba(139,92,246,.18)); overflow:hidden; }
.post-thumb img { width:100%; height:100%; object-fit:cover; }
.post-thumb span { width:68px; height:68px; display:grid; place-items:center; border-radius:22px; background:rgba(7,11,24,.72); font-size:32px; font-weight:950; color:var(--primary); }
.post-card-body { padding:20px; }
.post-card h3 { margin:8px 0 10px; font-size:21px; line-height:1.2; letter-spacing:-.03em; }
.post-card p { color:var(--muted); margin:0 0 16px; font-size:14px; }
.community-pulse { background:radial-gradient(circle at 80% 10%, rgba(139,92,246,.12), transparent 35%); }
.pulse-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.pulse-column { border:1px solid var(--line); border-radius:28px; padding:24px; background:rgba(255,255,255,.065); }
.pulse-column h3 { margin:0 0 18px; font-size:24px; letter-spacing:-.03em; }
.event-item { display:grid; grid-template-columns:76px 1fr; gap:14px; padding:14px 0; border-top:1px solid rgba(255,255,255,.09); }
.event-item:first-of-type { border-top:0; }
.event-item time { display:grid; place-items:center; height:58px; border-radius:18px; background:rgba(110,231,255,.12); color:var(--primary); font-weight:950; font-size:13px; }
.event-item b { display:block; margin-bottom:4px; } .event-item p { color:var(--muted); margin:0; font-size:14px; }
.discussions a { display:flex; justify-content:space-between; gap:14px; padding:15px 0; border-top:1px solid rgba(255,255,255,.09); }
.discussions a:first-of-type { border-top:0; } .discussions span { color:var(--primary); white-space:nowrap; font-size:13px; }
.newsletter-card { background:linear-gradient(135deg, rgba(110,231,255,.14), rgba(139,92,246,.12)); }
.newsletter-card p { color:var(--muted); }
.mini-newsletter { display:grid; gap:10px; margin:18px 0 10px; }
.mini-newsletter input, .footer-subscribe input { min-height:48px; border-radius:999px; border:1px solid var(--line); background:rgba(2,6,23,.46); color:var(--text); padding:0 16px; outline:none; }
.newsletter-card small { color:var(--muted); }
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
details { border:1px solid var(--line); border-radius:22px; padding:18px 20px; background:rgba(255,255,255,.06); }
summary { cursor:pointer; font-weight:850; font-size:18px; } details p { color:var(--muted); margin:12px 0 0; }
.mega-footer { padding:0; background:linear-gradient(180deg, rgba(7,11,24,.98), #040713); }
.footer-hero { display:flex; justify-content:space-between; gap:28px; align-items:center; padding:44px 0 32px; border-bottom:1px solid var(--line); }
.footer-hero p { color:var(--muted); max-width:620px; margin:14px 0 0; }
.footer-subscribe { display:flex; gap:10px; min-width:min(520px,100%); }
.footer-subscribe input { flex:1; }
.footer-mega-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:22px; padding:34px 0; border-bottom:1px solid var(--line); }
.footer-col h4 { color:#fff; margin:0 0 14px; font-size:15px; letter-spacing:.02em; }
.footer-col a { display:block; color:var(--muted); font-size:14px; padding:5px 0; }
.footer-col a:hover { color:var(--primary); }
.footer-bottom { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:24px 0 30px; color:var(--muted); }
@media (max-width: 1050px) { .latest-post-grid, .pulse-grid { grid-template-columns:repeat(2,1fr); } .footer-mega-grid { grid-template-columns:repeat(3,1fr); } .footer-hero { flex-direction:column; align-items:flex-start; } }
@media (max-width: 820px) { .editorial-layout, .featured-post-card { grid-template-columns:1fr; } .latest-post-grid, .pulse-grid, .faq-grid { grid-template-columns:1fr; } .featured-post-card h3 { font-size:28px; } }
@media (max-width: 620px) { .footer-mega-grid { grid-template-columns:repeat(2,1fr); } .footer-subscribe { flex-direction:column; } }

/* ===== Archive/category and single post templates ===== */
.archive-hero, .single-hero { position:relative; padding:86px 0 54px; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(circle at 20% 10%, rgba(110,231,255,.18), transparent 32%), radial-gradient(circle at 80% 0%, rgba(139,92,246,.16), transparent 30%); }
.archive-hero-inner { display:grid; grid-template-columns:1fr 420px; gap:34px; align-items:end; }
.archive-hero h1, .single-hero h1 { margin:18px 0 14px; font-size:clamp(38px,6vw,68px); line-height:1.02; letter-spacing:-.06em; }
.archive-hero p, .single-hero p { color:var(--muted); font-size:18px; max-width:780px; margin:0; }
.archive-search-card { border:1px solid var(--line); border-radius:26px; padding:20px; background:rgba(255,255,255,.075); box-shadow:var(--shadow); }
.search-form { display:flex; gap:10px; }
.search-form label { flex:1; }
.search-field, .sidebar-card input { width:100%; min-height:46px; border-radius:999px; border:1px solid var(--line); background:rgba(2,6,23,.5); color:var(--text); padding:0 15px; outline:none; }
.search-submit { min-height:46px; border:0; border-radius:999px; padding:0 16px; font-weight:850; color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); }
.archive-hot-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; color:var(--muted); font-size:13px; }
.archive-hot-tags a { padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:#dbeafe; }
.content-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:24px; align-items:start; }
.archive-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; padding:16px 18px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.06); }
.archive-toolbar strong { color:var(--primary); font-size:24px; }
.archive-filter { display:flex; gap:8px; flex-wrap:wrap; }
.archive-filter a { padding:7px 11px; border-radius:999px; color:var(--muted); }
.archive-filter a.active, .archive-filter a:hover { color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); }
.archive-post-list { display:grid; gap:16px; }
.archive-post-card { display:grid; grid-template-columns:260px 1fr; gap:20px; border:1px solid var(--line); border-radius:28px; padding:16px; background:rgba(255,255,255,.065); transition:.2s ease; }
.archive-post-card:hover { transform:translateY(-4px); border-color:rgba(110,231,255,.34); }
.archive-thumb { min-height:178px; border-radius:22px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg, rgba(110,231,255,.2), rgba(139,92,246,.2)); }
.archive-thumb img { width:100%; height:100%; object-fit:cover; }
.archive-thumb span { width:72px; height:72px; border-radius:24px; display:grid; place-items:center; font-size:34px; font-weight:950; color:var(--primary); background:rgba(7,11,24,.76); }
.archive-post-content { padding:8px 8px 8px 0; }
.archive-post-content h2 { font-size:28px; margin:8px 0 10px; letter-spacing:-.04em; }
.archive-post-content p { color:var(--muted); margin:0 0 16px; }
.content-sidebar { display:grid; gap:16px; }
.sticky-sidebar { position:sticky; top:96px; }
.sidebar-card { border:1px solid var(--line); border-radius:24px; padding:22px; background:rgba(255,255,255,.065); }
.sidebar-card h3 { margin:0 0 14px; font-size:21px; }
.sidebar-card ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.sidebar-card li, .sidebar-card > a { display:flex; justify-content:space-between; gap:8px; padding:9px 0; color:var(--muted); border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-card li:last-child, .sidebar-card > a:last-child { border-bottom:0; }
.sidebar-card a:hover { color:var(--primary); }
.gradient-sidebar { background:linear-gradient(135deg, rgba(110,231,255,.15), rgba(139,92,246,.13)); }
.gradient-sidebar p { color:var(--muted); }
.gradient-sidebar form { display:grid; gap:10px; }
.pagination-wrap { margin-top:24px; }
.nav-links { display:flex; gap:10px; flex-wrap:wrap; }
.page-numbers { padding:9px 13px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:rgba(255,255,255,.055); }
.page-numbers.current { color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); border-color:transparent; }
.single-hero-inner { max-width:980px; text-align:center; }
.single-breadcrumb { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; color:var(--muted); margin-bottom:18px; }
.single-breadcrumb a { color:var(--primary); }
.single-meta { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; color:var(--muted); margin-top:24px; }
.single-meta span { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.05); }
.single-layout { grid-template-columns:minmax(0,820px) 330px; justify-content:center; }
.single-article { border:1px solid var(--line); border-radius:30px; background:rgba(255,255,255,.065); overflow:hidden; }
.single-cover { max-height:460px; overflow:hidden; background:rgba(255,255,255,.05); }
.single-cover img { width:100%; height:100%; object-fit:cover; }
.article-content { padding:42px; color:#dbeafe; font-size:18px; line-height:1.85; }
.article-content h2, .article-content h3 { color:#fff; letter-spacing:-.035em; line-height:1.18; margin-top:34px; }
.article-content p { margin:0 0 20px; }
.article-content a { color:var(--primary); }
.article-content code { padding:3px 6px; border-radius:7px; background:rgba(110,231,255,.12); color:#a5f3fc; }
.article-content pre { border:1px solid var(--line); border-radius:20px; background:#050816; margin:24px 0; }
.article-content blockquote { margin:28px 0; padding:20px 24px; border-left:4px solid var(--primary); background:rgba(110,231,255,.08); border-radius:0 18px 18px 0; color:#e0f2fe; }
.article-tags, .article-share, .post-nav, .comments-panel { margin:0 42px 28px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); }
.article-tags a, .article-share a { display:inline-flex; margin:6px 8px 0 0; padding:7px 11px; border-radius:999px; border:1px solid var(--line); color:#dbeafe; }
.article-share { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.post-nav div { padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(255,255,255,.045); }
.toc-card a { border-bottom:0; padding:8px 0; }
@media (max-width: 980px) { .archive-hero-inner, .content-layout, .single-layout { grid-template-columns:1fr; } .sticky-sidebar { position:static; } }
@media (max-width: 720px) { .archive-post-card { grid-template-columns:1fr; } .archive-post-content { padding:0; } .archive-toolbar { align-items:flex-start; flex-direction:column; } .article-content { padding:28px; font-size:16px; } .article-tags, .article-share, .post-nav, .comments-panel { margin-left:28px; margin-right:28px; } .post-nav { grid-template-columns:1fr; } }

/* ===== Richer archive and single experience upgrade ===== */
.archive-hero-premium, .single-hero-premium { padding-top:104px; padding-bottom:70px; }
.archive-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.premium-search-card { position:relative; overflow:hidden; }
.premium-search-card:before { content:""; position:absolute; width:210px; height:210px; border-radius:50%; right:-90px; top:-100px; background:rgba(110,231,255,.14); }
.search-card-title { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; position:relative; }
.search-card-title span { color:var(--muted); font-size:12px; }
.archive-featured { padding-top:44px; padding-bottom:34px; }
.topic-showcase { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
.topic-main-card { min-height:370px; border:1px solid rgba(110,231,255,.28); border-radius:34px; padding:34px; background:radial-gradient(circle at 20% 10%, rgba(110,231,255,.24), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.055)); box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.topic-main-card:after { content:"AI"; position:absolute; right:26px; top:0; font-size:160px; font-weight:950; color:rgba(255,255,255,.045); letter-spacing:-.12em; }
.topic-label { width:max-content; padding:8px 12px; border-radius:999px; color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); font-weight:900; margin-bottom:18px; }
.topic-main-card h2 { font-size:38px; max-width:760px; }
.topic-main-card p { color:var(--muted); max-width:680px; }
.topic-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.topic-meta span { border:1px solid var(--line); border-radius:999px; padding:8px 11px; color:#dbeafe; background:rgba(2,6,23,.35); }
.topic-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.topic-mini-grid article { border:1px solid var(--line); border-radius:26px; padding:22px; background:rgba(255,255,255,.065); }
.topic-mini-grid span { color:var(--primary); font-weight:950; letter-spacing:.12em; }
.topic-mini-grid h3 { margin:20px 0 8px; font-size:22px; }
.topic-mini-grid p { color:var(--muted); margin:0; font-size:14px; }
.content-layout-wide { grid-template-columns:minmax(0,1fr) 360px; }
.archive-toolbar-premium span { color:var(--muted); font-size:14px; font-weight:400; }
.archive-insights-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.archive-insights-row div { padding:17px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.055); }
.archive-insights-row b { display:block; color:#fff; margin-bottom:4px; }
.archive-insights-row span { color:var(--muted); font-size:13px; }
.rich-archive-card { grid-template-columns:300px 1fr; padding:18px; }
.rich-archive-card .archive-thumb { min-height:218px; }
.article-progress-tags { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.article-progress-tags span { padding:6px 9px; border-radius:999px; background:rgba(110,231,255,.1); border:1px solid rgba(110,231,255,.18); color:#c7f9ff; font-size:12px; }
.sidebar-rich .sidebar-card { box-shadow:0 20px 60px rgba(0,0,0,.12); }
.trend-card a { display:grid; grid-template-columns:36px 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); }
.trend-card b { color:var(--primary); font-size:18px; }
.trend-card span { color:#dbeafe; }
.tag-cloud { display:flex; gap:8px; flex-wrap:wrap; }
.tag-cloud a { padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:#dbeafe; background:rgba(255,255,255,.045); }
.author-mini { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.author-mini:last-child { border-bottom:0; }
.author-mini > span { width:44px; height:44px; border-radius:16px; display:grid; place-items:center; color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); font-weight:950; }
.author-mini p { color:var(--muted); margin:3px 0 0; font-size:13px; }
.reading-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:100; background:transparent; }
.reading-progress span { display:block; width:38%; height:100%; background:linear-gradient(90deg, var(--primary), var(--accent)); box-shadow:0 0 18px rgba(110,231,255,.8); }
.single-layout-rich { grid-template-columns:minmax(0,860px) 350px; }
.single-article-rich { box-shadow:var(--shadow); }
.article-summary-card { margin:34px 42px 0; border:1px solid rgba(110,231,255,.25); border-radius:24px; padding:22px; background:linear-gradient(135deg, rgba(110,231,255,.12), rgba(139,92,246,.09)); display:grid; grid-template-columns:1fr 260px; gap:18px; }
.article-summary-card strong { font-size:22px; color:#fff; }
.article-summary-card p { color:var(--muted); margin:8px 0 0; }
.article-summary-card ul { margin:0; color:#dbeafe; display:grid; gap:8px; }
.resource-download-box { margin:0 42px 28px; padding:24px; border:1px solid rgba(52,211,153,.25); border-radius:24px; background:linear-gradient(135deg, rgba(52,211,153,.13), rgba(110,231,255,.08)); display:flex; justify-content:space-between; gap:18px; align-items:center; }
.resource-download-box h3 { margin:0 0 6px; font-size:24px; }
.resource-download-box p { margin:0; color:var(--muted); }
.related-articles { margin:0 42px 34px; padding-top:24px; border-top:1px solid var(--line); }
.related-articles h3 { font-size:26px; margin:0 0 14px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.related-grid a { padding:18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.055); }
.related-grid span { color:var(--primary); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.related-grid b { display:block; margin-top:10px; line-height:1.25; }
.toc-card-premium { background:linear-gradient(180deg, rgba(110,231,255,.1), rgba(255,255,255,.055)); }
.article-stats-card div { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.article-stats-card div:last-child { border-bottom:0; }
.article-stats-card span { color:var(--primary); }
@media (max-width: 1050px) { .topic-showcase, .content-layout-wide, .single-layout-rich { grid-template-columns:1fr; } .archive-insights-row { grid-template-columns:1fr; } }
@media (max-width: 760px) { .topic-mini-grid, .related-grid, .article-summary-card { grid-template-columns:1fr; } .rich-archive-card { grid-template-columns:1fr; } .topic-main-card h2 { font-size:30px; } .article-summary-card, .resource-download-box, .related-articles { margin-left:28px; margin-right:28px; } .resource-download-box { flex-direction:column; align-items:flex-start; } }

/* ===== Extra pages and more content density ===== */
.channel-deep-dive { padding-top:28px; padding-bottom:28px; }
.deep-dive-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; }
.deep-card { border:1px solid var(--line); border-radius:26px; padding:24px; background:rgba(255,255,255,.065); }
.deep-card-large { grid-row:span 2; background:linear-gradient(135deg, rgba(110,231,255,.15), rgba(139,92,246,.1)); }
.deep-card span { color:var(--primary); font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
.deep-card h3 { margin:18px 0 10px; font-size:25px; }
.deep-card p, .deep-card li { color:var(--muted); }
.deep-card ol { margin:14px 0 0; padding-left:20px; display:grid; gap:9px; }
.article-lab-box { margin:0 42px 28px; padding:24px; border:1px solid rgba(139,92,246,.25); border-radius:24px; background:linear-gradient(135deg, rgba(139,92,246,.14), rgba(110,231,255,.08)); }
.lab-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.lab-head span { color:#06101f; background:linear-gradient(135deg, var(--primary), var(--accent)); border-radius:999px; padding:6px 10px; font-weight:950; }
.lab-head strong { font-size:22px; }
.lab-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.lab-grid div { border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:15px; background:rgba(2,6,23,.28); }
.lab-grid p { color:var(--muted); margin:6px 0 0; font-size:14px; }
.discussion-cta { margin:0 42px 34px; padding:24px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:18px; align-items:center; }
.discussion-cta h3 { margin:0 0 6px; font-size:25px; }
.discussion-cta p { margin:0; color:var(--muted); }
.author-hero, .page-hero, .not-found-hero { padding:100px 0 64px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 20% 5%, rgba(110,231,255,.16), transparent 32%), radial-gradient(circle at 80% 10%, rgba(139,92,246,.16), transparent 30%); }
.author-hero-card { display:grid; grid-template-columns:160px 1fr; gap:26px; align-items:center; border:1px solid var(--line); border-radius:34px; padding:30px; background:rgba(255,255,255,.075); box-shadow:var(--shadow); }
.author-avatar-large img { width:132px; height:132px; border-radius:32px; border:1px solid var(--line); }
.author-hero h1, .page-hero h1, .not-found-card h1 { font-size:clamp(38px,6vw,66px); margin:14px 0; line-height:1.02; letter-spacing:-.055em; }
.author-hero p, .page-hero p, .not-found-card p { color:var(--muted); font-size:18px; max-width:760px; }
.author-stats { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.author-stats span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:#dbeafe; background:rgba(255,255,255,.05); }
.page-content-card { border:1px solid var(--line); border-radius:30px; background:rgba(255,255,255,.065); overflow:hidden; max-width:980px; }
.not-found-card { text-align:center; border:1px solid var(--line); border-radius:36px; padding:54px; background:rgba(255,255,255,.075); box-shadow:var(--shadow); }
.error-code { font-size:120px; line-height:.8; font-weight:950; letter-spacing:-.1em; background:linear-gradient(135deg, var(--primary), var(--primary-2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.not-found-actions, .not-found-links { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.not-found-links a { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:#dbeafe; }
.empty-state { text-align:center; border:1px solid var(--line); border-radius:28px; padding:54px 24px; background:rgba(255,255,255,.06); }
@media (max-width: 900px) { .deep-dive-grid, .lab-grid { grid-template-columns:1fr; } .deep-card-large { grid-row:auto; } .discussion-cta { flex-direction:column; align-items:flex-start; } .author-hero-card { grid-template-columns:1fr; } }
@media (max-width: 760px) { .article-lab-box, .discussion-cta { margin-left:28px; margin-right:28px; } .error-code { font-size:86px; } .not-found-card { padding:34px 22px; } }

/* ===== Product directories: tools, courses, projects, submit, member ===== */
.directory-hero,.tool-detail-hero,.course-detail-hero,.project-detail-hero,.submit-hero,.member-hero{padding:104px 0 72px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 18% 10%,rgba(110,231,255,.18),transparent 34%),radial-gradient(circle at 82% 0%,rgba(139,92,246,.16),transparent 30%)}
.directory-hero-grid,.tool-detail-grid,.course-detail-grid,.member-dashboard{display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:center}.directory-hero h1,.tool-detail-hero h1,.course-detail-hero h1,.project-detail-hero h1,.submit-hero h1,.member-hero h1{font-size:clamp(42px,7vw,74px);line-height:1;letter-spacing:-.065em;margin:18px 0}.directory-hero p,.tool-detail-hero p,.course-detail-hero p,.project-detail-hero p,.submit-hero p,.member-hero p{color:var(--muted);font-size:18px;max-width:760px}.directory-panel,.academy-map,.opensource-globe,.score-board,.course-price-card,.member-profile{border:1px solid var(--line);border-radius:32px;padding:28px;background:rgba(255,255,255,.075);box-shadow:var(--shadow)}.radar-grid,.academy-map{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.radar-grid span,.academy-map div{padding:16px;border-radius:18px;background:rgba(255,255,255,.07);color:#dbeafe}.directory-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.directory-filter a{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.05)}.directory-filter a.active{color:#06101f;background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent}.tool-directory-grid,.course-grid,.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tool-card-pro,.course-card,.project-card{border:1px solid var(--line);border-radius:28px;padding:22px;background:rgba(255,255,255,.065);transition:.2s}.tool-card-pro:hover,.course-card:hover,.project-card:hover{transform:translateY(-5px);border-color:rgba(110,231,255,.34)}.tool-logo{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(110,231,255,.2),rgba(139,92,246,.18));margin-bottom:18px;overflow:hidden}.tool-logo span{font-size:28px;font-weight:950;color:var(--primary)}.tool-score{display:grid;grid-template-columns:80px 1fr 36px;gap:10px;align-items:center;margin:16px 0;color:var(--muted);font-size:13px}.tool-score i,.score-list i,.progress-list i{display:block;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent));width:var(--w)}.tool-score i{background-color:rgba(255,255,255,.12)}.score-board strong,.course-price-card strong{display:block;font-size:64px;line-height:1;letter-spacing:-.08em;background:linear-gradient(135deg,#fff,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}.score-board span,.course-price-card span{color:var(--muted)}.score-list{display:grid;gap:12px;margin-top:22px}.score-list p{margin:0;color:var(--muted)}.feature-table{margin:34px 42px 0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.045)}.feature-table div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:18px;border-bottom:1px solid rgba(255,255,255,.08)}.feature-table div:last-child{border-bottom:0}.feature-table span{color:var(--muted)}.course-track-row,.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.course-track-row div,.member-grid article{border:1px solid var(--line);border-radius:24px;padding:20px;background:rgba(255,255,255,.065)}.course-track-row b,.member-grid strong{display:block;font-size:28px;line-height:1;color:#fff}.course-track-row span,.member-grid p,.member-grid span{color:var(--muted)}.course-cover{height:180px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(110,231,255,.18),rgba(139,92,246,.16));margin-bottom:18px;overflow:hidden}.course-cover span{font-weight:950;color:var(--primary);letter-spacing:.15em}.course-cover img{width:100%;height:100%;object-fit:cover}.course-meta,.project-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.course-meta span,.project-stats span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:#dbeafe;font-size:12px}.syllabus{padding:34px 42px}.syllabus h2{margin-bottom:18px}.syllabus div,.contribution-board div{display:grid;grid-template-columns:90px 1fr 80px;gap:12px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.045);margin-bottom:10px}.syllabus span,.contribution-board b{color:var(--primary);font-weight:850}.syllabus em,.contribution-board em{font-style:normal;color:var(--muted);text-align:right}.project-head{display:flex;justify-content:space-between;margin-bottom:34px}.project-head span{color:var(--primary);font-weight:950}.project-head em{font-style:normal;color:#06101f;background:var(--accent);padding:5px 10px;border-radius:999px;font-size:12px}.project-card h3{font-size:25px;margin:0 0 10px}.project-card p{color:var(--muted)}.contribution-board{padding:34px 42px}.submit-layout{display:grid;grid-template-columns:1fr 360px;gap:22px}.submit-form-card,.submit-guide{border:1px solid var(--line);border-radius:30px;padding:28px;background:rgba(255,255,255,.065)}.submit-form{display:grid;gap:14px}.submit-form label{display:grid;gap:8px;color:#dbeafe}.submit-form input,.submit-form select,.submit-form textarea{width:100%;min-height:48px;border-radius:16px;border:1px solid var(--line);background:rgba(2,6,23,.5);color:var(--text);padding:12px;outline:none}.submit-form textarea{min-height:150px}.submit-guide li{color:var(--muted);margin-bottom:10px}.member-profile{text-align:center}.member-profile span{width:92px;height:92px;margin:0 auto 16px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#06101f;font-size:34px;font-weight:950}.member-profile strong{display:block;font-size:24px}.member-profile em{font-style:normal;color:var(--muted)}.member-panels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.progress-list p{display:grid;gap:8px;color:var(--muted)}@media(max-width:1050px){.directory-hero-grid,.tool-detail-grid,.course-detail-grid,.member-dashboard,.submit-layout{grid-template-columns:1fr}.tool-directory-grid,.course-grid,.project-grid{grid-template-columns:1fr 1fr}.course-track-row,.member-grid,.member-panels{grid-template-columns:1fr 1fr}}@media(max-width:680px){.tool-directory-grid,.course-grid,.project-grid,.course-track-row,.member-grid,.member-panels{grid-template-columns:1fr}.feature-table{margin-left:28px;margin-right:28px}.feature-table div,.syllabus div,.contribution-board div{grid-template-columns:1fr}.syllabus,.contribution-board{padding:28px}.syllabus em,.contribution-board em{text-align:left}}

/* ===== Functional upgrades: filters, reviews, roadmap, member states ===== */
.advanced-tool-filter{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr auto;gap:12px;align-items:end;margin-bottom:18px;padding:18px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.065)}.advanced-tool-filter label{display:grid;gap:7px;color:#dbeafe;font-size:14px}.advanced-tool-filter input,.advanced-tool-filter select{min-height:46px;border-radius:999px;border:1px solid var(--line);background:rgba(2,6,23,.52);color:var(--text);padding:0 14px;outline:none}.tool-extra-meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.tool-extra-meta span{padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:12px}.pros-cons-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 42px 0}.pros-box,.cons-box{border:1px solid var(--line);border-radius:24px;padding:22px;background:rgba(255,255,255,.055)}.pros-box{border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.08)}.cons-box{border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.07)}.pros-box h3,.cons-box h3{margin:0 0 12px}.pros-box li,.cons-box li{color:var(--muted);margin-bottom:8px}.tool-user-reviews,.course-reviews,.roadmap-section,.contributors-section{margin:0 42px 34px;padding-top:24px;border-top:1px solid var(--line)}.review-item{display:grid;grid-template-columns:170px 1fr 80px;gap:12px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.045);margin-bottom:10px}.review-item span{color:var(--muted)}.review-item em{font-style:normal;color:var(--primary);text-align:right}.instructor-card{margin:34px 42px 0;padding:22px;border:1px solid rgba(110,231,255,.22);border-radius:24px;background:rgba(110,231,255,.08)}.instructor-card h3{margin:0 0 8px}.syllabus-accordion details{display:block;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.045);margin-bottom:10px}.syllabus-accordion summary{display:grid;grid-template-columns:90px 1fr 80px;gap:12px;align-items:center;padding:16px;cursor:pointer}.syllabus-accordion details p{padding:0 16px 16px;margin:0;color:var(--muted)}.roadmap-line{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.roadmap-line div{border:1px solid var(--line);border-radius:22px;padding:20px;background:rgba(255,255,255,.055)}.roadmap-line span{display:inline-flex;width:46px;height:46px;border-radius:16px;align-items:center;justify-content:center;color:#06101f;background:linear-gradient(135deg,var(--primary),var(--accent));font-weight:950}.roadmap-line b{display:block;margin:16px 0 6px}.roadmap-line p{color:var(--muted);margin:0}.contributors{display:flex;gap:10px;flex-wrap:wrap}.contributors span{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;color:#06101f;background:linear-gradient(135deg,var(--primary),var(--primary-2));font-weight:950}.github-data-card small{display:block;margin-top:14px;color:var(--muted)}.submit-status{padding:13px 15px;border-radius:16px;margin:0 0 16px;border:1px solid var(--line)}.submit-success{background:rgba(52,211,153,.12);color:#86efac}.submit-missing,.submit-error{background:rgba(251,113,133,.12);color:#fda4af}.member-profile img{width:92px;height:92px;border-radius:30px;margin:0 auto 16px;display:block;border:1px solid var(--line)}@media(max-width:1050px){.advanced-tool-filter{grid-template-columns:1fr 1fr}.roadmap-line{grid-template-columns:1fr}.review-item{grid-template-columns:1fr}}@media(max-width:680px){.advanced-tool-filter,.pros-cons-grid,.syllabus-accordion summary{grid-template-columns:1fr}.pros-cons-grid,.tool-user-reviews,.course-reviews,.roadmap-section,.contributors-section,.instructor-card{margin-left:28px;margin-right:28px}.review-item em{text-align:left}}

/* ===== Ajax state, favorites, progress and technical discussion comments ===== */
.tool-directory-grid.is-loading{opacity:.55;filter:blur(1px);pointer-events:none}.codeaihub-favorite.is-active{background:linear-gradient(135deg,var(--primary-2),#ec4899);border-color:transparent}.course-progress-box{display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.course-progress-box strong{color:#fff}.codeaihub-comments{margin:0 42px 42px;padding-top:28px;border-top:1px solid var(--line)}.discussion-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.discussion-header h2{font-size:30px}.discussion-header p{color:var(--muted);margin:0}.tech-comment-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}.tech-comment-card{display:grid;grid-template-columns:58px 1fr;gap:14px;border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.055)}.tech-comment-avatar img{border-radius:18px}.tech-comment-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}.tech-comment-meta span,.tech-comment-meta em{color:var(--muted);font-size:13px;font-style:normal}.tech-comment-content{color:#dbeafe}.tech-comment-content p{margin:0 0 10px}.tech-comment-actions a{display:inline-flex;margin-top:8px;color:var(--primary);font-weight:800}.tech-comment-form{border:1px solid var(--line);border-radius:24px;padding:22px;background:rgba(255,255,255,.055);margin-top:20px}.tech-comment-form label{display:block;color:#dbeafe;margin-bottom:8px}.tech-comment-form textarea,.tech-comment-form input{width:100%;border:1px solid var(--line);border-radius:16px;background:rgba(2,6,23,.52);color:var(--text);padding:12px;outline:none}.tech-comment-form .submit{min-height:44px;padding:0 18px;border:0;border-radius:999px;color:#06101f;background:linear-gradient(135deg,var(--primary),var(--accent));font-weight:850}@media(max-width:680px){.codeaihub-comments{margin-left:28px;margin-right:28px}.discussion-header{flex-direction:column;align-items:flex-start}.tech-comment-card{grid-template-columns:1fr}}

/* ===== Content page optimization pack ===== */
.content-meta-strip{display:flex;gap:10px;flex-wrap:wrap;margin:34px 42px 0}.content-meta-strip span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.055);color:#dbeafe;font-size:13px}.auto-toc-list{display:grid;gap:8px}.auto-toc-list a{display:block;border-bottom:0!important;padding:7px 0!important;color:var(--muted)}.auto-toc-list a:hover{color:var(--primary)}.auto-toc-list .toc-sub{padding-left:14px!important;font-size:13px}.copy-code-button{position:absolute;right:12px;top:12px;border:1px solid var(--line);border-radius:999px;background:rgba(7,11,24,.86);color:var(--primary);padding:6px 10px;font-weight:800;cursor:pointer}.resource-download-enhanced{align-items:flex-start}.resource-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.resource-chips span{padding:6px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#dbeafe;font-size:12px}.content-page-cta{margin:0 42px 34px;padding:26px;border:1px solid rgba(110,231,255,.24);border-radius:26px;background:linear-gradient(135deg,rgba(110,231,255,.13),rgba(139,92,246,.1));display:flex;justify-content:space-between;gap:18px;align-items:center}.content-page-cta h3{margin:0 0 6px;font-size:26px}.content-page-cta p{margin:0;color:var(--muted)}.pricing-section,.comparison-section,.trial-lessons,.course-faq,.quick-start-section{margin:34px 42px 0;padding-top:24px;border-top:1px solid var(--line)}.pricing-section h3,.comparison-section h3,.trial-lessons h2,.course-faq h2,.quick-start-section h2{font-size:28px;margin:0 0 16px}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.pricing-grid>div{border:1px solid var(--line);border-radius:24px;padding:22px;background:rgba(255,255,255,.055);display:grid;gap:8px}.pricing-grid .highlight{border-color:rgba(110,231,255,.34);background:linear-gradient(135deg,rgba(110,231,255,.13),rgba(139,92,246,.09))}.pricing-grid strong{font-size:30px;color:#fff}.pricing-grid p,.pricing-grid span{color:var(--muted);margin:0}.compare-table{border:1px solid var(--line);border-radius:22px;overflow:hidden}.compare-table>div{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-bottom:1px solid rgba(255,255,255,.08)}.compare-table>div:last-child{border-bottom:0}.compare-table span,.compare-table b{padding:14px;border-right:1px solid rgba(255,255,255,.08)}.compare-table span:last-child,.compare-table b:last-child{border-right:0}.compare-table b{color:#fff;background:rgba(110,231,255,.08)}.compare-table span{color:var(--muted)}.trial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.trial-grid a{border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.055)}.trial-grid span{color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.1em}.trial-grid b{display:block;margin:10px 0;color:#fff}.trial-grid em{font-style:normal;color:var(--muted)}.course-faq details{margin-bottom:10px}.quick-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quick-steps>div{border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.055)}.quick-steps span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:14px;color:#06101f;background:linear-gradient(135deg,var(--primary),var(--accent));font-weight:950}.quick-steps b{display:block;margin:12px 0;color:#fff}.quick-steps pre{border-radius:14px;margin:0;padding:14px;background:#050816}@media(max-width:820px){.pricing-grid,.trial-grid,.quick-steps{grid-template-columns:1fr}.compare-table{overflow:auto}.compare-table>div{min-width:680px}.content-page-cta{flex-direction:column;align-items:flex-start}.content-meta-strip,.pricing-section,.comparison-section,.trial-lessons,.course-faq,.quick-start-section,.content-page-cta{margin-left:28px;margin-right:28px}}

/* ===== Editing helper shortcode components ===== */
.codeai-shortcode{margin:28px 0}.codeai-callout{border:1px solid rgba(110,231,255,.25);border-radius:22px;padding:20px;background:rgba(110,231,255,.08)}.codeai-callout strong{display:block;font-size:20px;margin-bottom:8px;color:#fff}.codeai-callout p{margin:0;color:var(--muted)}.codeai-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.codeai-steps div{border:1px solid var(--line);border-radius:20px;padding:18px;background:rgba(255,255,255,.055)}.codeai-steps span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:14px;color:#06101f;background:linear-gradient(135deg,var(--primary),var(--accent));font-weight:950}.codeai-steps b{display:block;margin-top:12px;color:#fff}@media(max-width:820px){.codeai-steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.codeai-steps{grid-template-columns:1fr}}

/* =========================================================
   CodeAI Hub Visual Redesign v2 — Apple / Linear Clean System
   Goal: calmer, cleaner, more premium, less noisy.
   ========================================================= */
:root {
  --bg: #f6f7fb;
  --bg-2: #ffffff;
  --panel: rgba(255, 255, 255, .86);
  --panel-2: #ffffff;
  --text: #0b1220;
  --muted: #667085;
  --line: rgba(15, 23, 42, .09);
  --primary: #2563eb;
  --primary-2: #7c3aed;
  --accent: #06b6d4;
  --warn: #f59e0b;
  --danger: #e11d48;
  --radius: 22px;
  --shadow: 0 18px 55px rgba(15, 23, 42, .08);
  --container: 1180px;
}

html { background: var(--bg); }
body {
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 99, 235, .10), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(124, 58, 237, .08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 42%, #f3f5fa 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.45), transparent 65%);
  z-index: -1;
}

.container { width: min(calc(100% - 48px), var(--container)); }
.site-header {
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(15,23,42,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.navbar { min-height: 72px; }
.logo { color: var(--text); letter-spacing: -.035em; }
.logo-mark {
  background: linear-gradient(135deg, #111827, #334155);
  color: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}
.nav-menu { gap: 4px; }
.nav-menu a {
  color: #475467;
  font-weight: 650;
  padding: 9px 12px;
}
.nav-menu a:hover {
  color: var(--text);
  background: rgba(15,23,42,.055);
}
.btn {
  border-color: rgba(15,23,42,.10);
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.btn:hover {
  transform: translateY(-1px);
  background: #f8fafc;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #111827, #2563eb);
  box-shadow: 0 14px 36px rgba(37,99,235,.22);
}
.btn-purple {
  color: #fff;
  background: linear-gradient(135deg, #111827, #7c3aed);
  box-shadow: 0 14px 36px rgba(124,58,237,.18);
}
.kicker {
  color: #1d4ed8;
  background: rgba(37, 99, 235, .065);
  border-color: rgba(37, 99, 235, .13);
  font-size: 13px;
}
.hero, .hero-xl, .archive-hero, .single-hero, .directory-hero, .tool-detail-hero, .course-detail-hero, .project-detail-hero, .submit-hero, .member-hero, .author-hero, .page-hero, .not-found-hero {
  background:
    radial-gradient(circle at 15% 10%, rgba(37,99,235,.10), transparent 32%),
    radial-gradient(circle at 85% 8%, rgba(124,58,237,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,247,251,.82));
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.hero { padding: 104px 0 78px; }
.hero-xl { padding: 120px 0 90px; }
h1, .archive-hero h1, .single-hero h1, .directory-hero h1, .tool-detail-hero h1, .course-detail-hero h1, .project-detail-hero h1, .submit-hero h1, .member-hero h1 {
  color: #0b1220;
  letter-spacing: -.075em;
  font-weight: 860;
}
h2 { color: #101828; font-weight: 820; letter-spacing: -.055em; }
h3, h4 { color: #101828; }
.hero p, .hero-lead, .section-title p, .archive-hero p, .single-hero p, .directory-hero p, .tool-detail-hero p, .course-detail-hero p, .project-detail-hero p, .submit-hero p, .member-hero p, .large-muted {
  color: #667085 !important;
}
.gradient-text {
  background: linear-gradient(135deg, #0b1220 0%, #2563eb 48%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-strip b, .badge, .topic-meta span, .single-meta span, .content-meta-strip span, .showcase-footer span, .course-meta span, .project-stats span {
  background: #fff;
  color: #475467;
  border-color: rgba(15,23,42,.09);
}
.trust-row, .brand-strip, .post-meta, .single-meta { color: #667085; }

.section { padding: 86px 0; }
.section-tight { padding: 28px 0 64px; }
.section-head { margin-bottom: 34px; }
.card, .rich-card, .tool-tile, .path-card, .showcase-card, .post-card, .archive-post-card, .sidebar-card, .single-article, .submit-form-card, .submit-guide, .directory-panel, .academy-map, .opensource-globe, .score-board, .course-price-card, .member-profile, .open-source-board, .terminal, .visual-card, .dash-card, .topic-main-card, .topic-mini-grid article, .deep-card, .pulse-column, details, .footer-subscribe input, .newsletter input {
  background: rgba(255,255,255,.86);
  border-color: rgba(15,23,42,.085);
  box-shadow: 0 18px 50px rgba(15,23,42,.07);
  backdrop-filter: blur(18px);
}
.card:hover, .post-card:hover, .archive-post-card:hover, .tool-card-pro:hover, .course-card:hover, .project-card:hover, .showcase-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 22px 70px rgba(15,23,42,.10);
}
.card p, .tool-item p, .path-item p, .post-card p, .archive-post-content p, .showcase-card p, .project-card p, .course-card p, .sidebar-card p, .repo-item p, .event-item p, .deep-card p, .deep-card li, .resource-list span, .article-summary-card p, .resource-download-box p, .content-page-cta p, .pricing-grid p, .pricing-grid span, .roadmap-line p, .quick-steps code, .course-faq p, .trial-grid em {
  color: #667085;
}
.icon, .tool-icon {
  background: rgba(37,99,235,.07);
  color: #2563eb;
}

/* calm down visual-heavy blocks */
.hero-orbit, .orbit-one, .orbit-two { opacity: .35; }
.hero-dashboard { min-height: 520px; }
.main-dash { background: rgba(255,255,255,.86); }
.dash-top { color: #101828; }
.code-window, .terminal, pre, .article-content pre, .quick-steps pre {
  background: #0b1020;
  color: #dbeafe;
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}
.window-bar { border-bottom-color: rgba(255,255,255,.10); }
.float-chip, .mini-card {
  background: rgba(255,255,255,.90);
  border-color: rgba(15,23,42,.08);
  color: #101828;
  box-shadow: 0 18px 48px rgba(15,23,42,.10);
}
.mini-card span, .float-chip span { color: #667085; }
.global-stats {
  background: rgba(255,255,255,.76);
  border-color: rgba(15,23,42,.08);
  box-shadow: 0 18px 55px rgba(15,23,42,.06);
}
.global-stats div { background: #fff; }
.global-stats strong, .stat strong, .score-board strong, .course-price-card strong {
  background: linear-gradient(135deg, #101828, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
}
.global-stats span, .stat span { color: #667085; }
.dark-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,247,251,.72));
  border-color: rgba(15,23,42,.07);
}
.repo-item, .issue, .resource-list a, .tool-item, .path-item, .archive-insights-row div, .event-item time, .lab-grid div, .feature-table div, .syllabus div, .contribution-board div, .review-item, .quick-steps>div, .pricing-grid>div, .roadmap-line div {
  background: #fff;
  border-color: rgba(15,23,42,.08);
}
.issue span, .repo-item h4, .post-side-list b, .archive-post-content h2, .tool-tile h3, .path-card h3, .showcase-card h3 { color: #101828; }
.issue b, .tool-tile span, .path-card span, .showcase-meta, .post-category, .post-tags span, .trend-card b, .tag-cloud a:hover { color: #2563eb; }
.issue i, .archive-filter a, .content-tabs a { color: #667085; }

/* article/content readability */
.article-content {
  color: #344054;
  background: transparent;
}
.article-content h2, .article-content h3 { color: #101828; }
.article-content p, .article-content li { color: #475467; }
.article-content blockquote {
  color: #1e3a8a;
  background: rgba(37,99,235,.06);
  border-left-color: #2563eb;
}
.article-summary-card, .resource-download-box, .content-page-cta, .pros-box, .cons-box, .instructor-card, .trial-lessons, .course-faq, .quick-start-section, .pricing-section, .comparison-section, .roadmap-section, .contributors-section {
  background: rgba(255,255,255,.70);
  border-color: rgba(15,23,42,.08);
}
.article-summary-card strong, .resource-download-box h3, .content-page-cta h3, .pricing-section h3, .comparison-section h3, .trial-lessons h2, .course-faq h2, .quick-start-section h2 { color: #101828; }
.copy-code-button {
  background: rgba(255,255,255,.92);
  color: #2563eb;
  border-color: rgba(255,255,255,.18);
}

/* forms */
.search-field, .sidebar-card input, .advanced-tool-filter input, .advanced-tool-filter select, .submit-form input, .submit-form select, .submit-form textarea, .tech-comment-form textarea, .tech-comment-form input, .newsletter input, .footer-subscribe input {
  background: #fff;
  color: #101828;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.search-submit, .tech-comment-form .submit {
  background: linear-gradient(135deg, #111827, #2563eb);
  color: #fff;
}
.advanced-tool-filter {
  background: rgba(255,255,255,.82);
  border-color: rgba(15,23,42,.08);
  box-shadow: 0 18px 55px rgba(15,23,42,.06);
}
.advanced-tool-filter label, .submit-form label, .tech-comment-form label { color: #344054; }

/* mega footer becomes clean */
.mega-footer, .site-footer {
  background: #ffffff;
  border-top: 1px solid rgba(15,23,42,.08);
  color: #667085;
}
.footer-hero, .footer-mega-grid { border-color: rgba(15,23,42,.08); }
.footer-hero p, .footer-col a, .footer-bottom { color: #667085; }
.footer-col h4 { color: #101828; }
.footer-col a:hover { color: #2563eb; }

/* cleaner page-specific cards */
.tool-card-pro, .course-card, .project-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.085);
  box-shadow: 0 16px 45px rgba(15,23,42,.06);
}
.tool-logo, .course-cover {
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
}
.project-head em, .repo-item span, .content-tabs a.active, .archive-filter a.active, .page-numbers.current {
  color: #fff;
  background: linear-gradient(135deg, #111827, #2563eb);
}

/* mobile menu clean */
@media (max-width: 920px) {
  .nav-menu {
    background: rgba(255,255,255,.96);
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 18px 55px rgba(15,23,42,.10);
  }
}

/* reduce excessive visual density in clean mode */
.grid-4, .tool-matrix, .showcase-grid, .latest-post-grid, .pulse-grid, .footer-mega-grid, .tool-directory-grid, .course-grid, .project-grid {
  gap: 20px;
}
.rich-card, .tool-tile, .showcase-card, .post-card, .tool-card-pro, .course-card, .project-card {
  border-radius: 28px;
}


/* ===== AMBERPRESS USER REFERENCE FINAL OVERRIDE ===== */
/* ===== AmberPress reference CSS from index.html ===== */

:root {
  --bg: oklch(95.5% 0.02 75);
  --bg2: oklch(93% 0.025 75);
  --surface: oklch(100% 0 0);
  --surface-glass: oklch(100% 0 0 / 0.7);
  --fg: oklch(18% 0.02 75);
  --fg2: oklch(32% 0.015 75);
  --muted: oklch(48% 0.014 75);
  --muted2: oklch(62% 0.01 75);
  --border: oklch(88% 0.015 75);
  --accent: oklch(68% 0.20 75);
  --accent-dim: oklch(56% 0.20 75);
  --accent-bg: oklch(70% 0.16 75 / 0.10);
  --code-bg: oklch(16% 0.015 75);
  --code-line: oklch(24% 0.01 75);
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --container: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(14% 0.01 75);
    --bg2: oklch(19% 0.015 75);
    --surface: oklch(22% 0.015 75);
    --surface-glass: oklch(22% 0.015 75 / 0.85);
    --fg: oklch(92% 0.01 75);
    --fg2: oklch(78% 0.01 75);
    --muted: oklch(58% 0.01 75);
    --muted2: oklch(48% 0.01 75);
    --border: oklch(30% 0.01 75);
    --accent: oklch(76% 0.18 75);
    --accent-dim: oklch(62% 0.18 75);
    --accent-bg: oklch(76% 0.16 75 / 0.12);
    --code-bg: oklch(10% 0.01 75);
    --code-line: oklch(18% 0.01 75);
  }
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* paper noise texture */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: 0.45;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(106,84,56,0.006) 2px, rgba(106,84,56,0.006) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(106,84,56,0.006) 2px, rgba(106,84,56,0.006) 4px);
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1 { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 60px); font-weight: 620; line-height: 1.08; letter-spacing: -0.028em; }
h2 { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 580; line-height: 1.18; letter-spacing: -0.018em; }
h3 { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 530; line-height: 1.3; letter-spacing: -0.008em; }
h4 { font-family: var(--font-body); font-size: 16px; font-weight: 530; line-height: 1.4; letter-spacing: 0; }

.body-large { font-size: 17px; line-height: 1.65; color: var(--muted); }
.body-small { font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* nav — starts translucent, fully frosted on scroll */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: oklch(100% 0 0 / 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s;
}
nav.scrolled {
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
nav .container {
  display: flex; align-items: center; height: 60px;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 620; font-size: 18px; letter-spacing: -0.02em;
}
.nav-logo svg { flex-shrink: 0; transition: transform 0.5s ease; }
.nav-logo:hover svg { transform: rotate(72deg); }
.nav-links {
  display: flex; align-items: center; gap: 24px;
  margin-left: auto; list-style: none;
}
.nav-links a {
  font-size: 14px; font-weight: 510; letter-spacing: 0.02em;
  color: var(--muted); transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transition: transform 0.3s;
  transform-origin: right;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .nav-cta::after { display: none; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px;
  background: var(--accent); color: #fff;
  border-radius: 8px; font-size: 14px; font-weight: 510; letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--accent-dim); transform: translateY(-1px); }
.nav-cta svg { transition: transform 0.2s; }
.nav-cta:hover svg { transform: translateX(3px); }
.mobile-toggle {
  display: none; margin-left: auto;
  background: none; border: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg);
  border-radius: 8px;
}
.mobile-toggle:hover { background: var(--border); }

/* reading progress bar */
.progress-bar {
  position: absolute; bottom: -1px; left: 0;
  height: 1.5px; background: var(--accent);
  width: 0; transition: width 0.1s linear;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* hero — terminal split */
.hero {
  padding: 140px 0 80px;
  position: relative; overflow: hidden;
}
.hero .container { position: relative; }
.hero-glow {
  position: absolute;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: 90%; height: 160%;
  background: radial-gradient(ellipse at 50% 30%, oklch(78% 0.12 75 / 0.18), transparent 65%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px; align-items: center;
}
.hero h1 { margin-bottom: 14px; position: relative; z-index: 1; }
.hero h1 .accent-word { color: var(--accent); }
.hero h1 .accent-word-glow {
  color: var(--accent);
  text-shadow: 0 0 20px oklch(68% 0.20 75 / 0.25), 0 0 60px oklch(68% 0.20 75 / 0.1);
}
.hero p { max-width: 58ch; position: relative; z-index: 1; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; position: relative; z-index: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 510; letter-spacing: 0.02em;
  border: 0; cursor: pointer;
  transition: all 0.2s;
}
.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover {
  background: var(--accent-dim); transform: translateY(-2px);
  box-shadow: 0 8px 24px oklch(68% 0.20 75 / 0.3);
}
.btn-primary:active { transform: translateY(0) scale(0.97); }
.btn-secondary {
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0) scale(0.97); }

/* terminal code block */
.terminal {
  background: var(--code-bg); border-radius: 12px; overflow: hidden;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  position: relative;
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--code-line);
}
.terminal-bar span { width: 10px; height: 10px; border-radius: 50%; }
.terminal-bar .r { background: #ff5f57; }
.terminal-bar .y { background: #ffbd2e; }
.terminal-bar .g { background: #28c840; }
.terminal-bar .title {
  margin-left: auto; font-size: 12px; color: oklch(55% 0.02 75);
  font-weight: 400;
}
.terminal-body { padding: 20px 20px 24px; overflow-x: auto; position: relative; }
.terminal-body pre { margin: 0; white-space: pre; }
.terminal .gutter {
  display: inline-block; width: 24px; text-align: right;
  color: oklch(35% 0.02 75); margin-right: 16px;
  user-select: none;
}
.tk-kw { color: oklch(74% 0.16 75); }
.tk-fn { color: oklch(80% 0.08 225); }
.tk-str { color: oklch(76% 0.12 145); }
.tk-num { color: oklch(70% 0.16 75); }
.tk-cm { color: oklch(44% 0.02 75); font-style: italic; }
.tk-tag { color: oklch(74% 0.16 35); }
.tk-op { color: oklch(72% 0.14 75); }
.tk-vr { color: oklch(78% 0.06 250); }
.tk-cursor {
  display: inline-block; width: 2px; height: 1.1em;
  background: var(--accent); vertical-align: text-bottom;
  box-shadow: 0 0 6px oklch(68% 0.20 75 / 0.3), 0 0 16px oklch(68% 0.20 75 / 0.12);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* typewriter reveal animation */
@keyframes typeReveal {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.hero .terminal-body pre {
  clip-path: inset(100% 0 0 0);
  animation: typeReveal 2.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.terminal-typo {
  position: absolute; bottom: 0; right: 0;
  transform: translateY(50%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

@media (max-width: 900px) {
  .hero { padding: 120px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .terminal-typo { display: none; }
}

/* quote section — full-width rhythm breaker */
.quote-section {
  padding: 80px 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.quote-section blockquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 480;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg2);
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.quote-section .quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4em;
  line-height: 0;
  color: var(--accent);
  opacity: 0.6;
  vertical-align: middle;
}
.quote-section cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* stats section — real data */
.stats-section {
  padding: 72px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat-item {
  text-align: center;
  padding: 20px 12px;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  margin-bottom: 6px;
}
.stat-num small {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--accent);
  vertical-align: super;
  letter-spacing: 0;
}
.stat-label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.stat-sep {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}

@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; gap: 12px; } }

/* section rhythm */
section { padding: 90px 0; }
.section-label {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: ''; display: inline-block;
  width: 20px; height: 1.5px; background: var(--accent);
}
.section-title { margin-bottom: 14px; }
.section-desc { margin-bottom: 48px; max-width: 62ch; }

/* features — 2+2+2 rhythm */
.features-section { background: var(--surface); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
}
.feature-card:hover {
  background: var(--accent-bg);
  border-color: oklch(68% 0.20 75 / 0.2);
  transform: translateY(-3px);
}
.feature-icon {
  width: 36px; height: 36px; margin-bottom: 16px;
  color: var(--accent);
  transition: transform 0.3s;
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); }
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--muted2); line-height: 1.6; }

@media (max-width: 960px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .features-grid { grid-template-columns: 1fr; } }

/* showcase — full-width code demo */
.showcase-section { position: relative; }
.showcase-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--bg2) 0%, transparent 100%);
  pointer-events: none;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px; align-items: center;
  position: relative;
}
.showcase-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.tag {
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-family: var(--font-mono); font-weight: 510;
  background: var(--accent-bg);
  color: var(--accent-dim);
  border: 1px solid oklch(68% 0.20 75 / 0.12);
  transition: background 0.2s, transform 0.2s;
}
.tag:hover { background: oklch(68% 0.20 75 / 0.18); }

.showcase-terminal { font-size: 13px; }
.showcase-terminal .terminal-body { padding: 16px 20px; }
.showcase-terminal .terminal-body pre { white-space: pre-wrap; }

@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* blog preview */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.blog-card-img {
  height: 160px; background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted2); font-size: 13px; font-family: var(--font-mono);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.blog-card-img svg { opacity: 0.25; }
.blog-card-body { padding: 22px; }
.blog-card-meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.blog-card h3 { font-size: 17px; margin-bottom: 8px; }
.blog-card p { font-size: 14px; color: var(--muted2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; font-size: 14px; font-weight: 510;
  color: var(--accent); transition: gap 0.2s;
}
.blog-card-link svg { transition: transform 0.2s; }
.blog-card:hover .blog-card-link svg { transform: translateX(4px); }

@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-img { height: 130px; }
}

/* theme deep-dive */
.theme-section {
  background: var(--fg);
  color: #fff;
}
.theme-section .section-label { color: oklch(76% 0.16 75); }
.theme-section .section-label::before { background: oklch(76% 0.16 75); }
.theme-section h2 { color: #fff; font-weight: 620; }
.theme-section .section-desc { color: oklch(68% 0.01 75); }
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.theme-item {
  padding: 28px; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s, transform 0.3s;
}
.theme-item:hover {
  background: rgba(255,255,255,0.09);
  transform: translateY(-3px);
}
.theme-item svg { color: oklch(76% 0.16 75); margin-bottom: 14px; }
.theme-item h4 { color: #fff; margin-bottom: 8px; }
.theme-item p { font-size: 14px; line-height: 1.6; color: oklch(68% 0.01 75); }

@media (max-width: 840px) { .theme-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .theme-grid { grid-template-columns: 1fr; } }

/* cta */
.cta-section {
  text-align: center;
  padding: 100px 0 90px;
}
.cta-section .section-desc { margin: 0 auto 36px; }
.cta-section .cta-btn-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* footer */
footer {
  padding: 48px 0 32px;
  border-top: 1px solid var(--border);
}
footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 10px; max-width: 34ch; }
footer h5 {
  font-size: 12px; font-weight: 510; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg); margin-bottom: 14px;
}
footer ul { list-style: none; }
footer ul li { margin-bottom: 8px; }
footer ul a { font-size: 14px; color: var(--muted); transition: color 0.2s; }
footer ul a:hover { color: var(--accent); }
.footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: 20px; margin-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted);
}

@media (max-width: 768px) {
  footer .container { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  footer .container { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
}

/* animations */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.reveal.vis { opacity: 1; transform: translateY(0); }
.reveal-scale {
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.reveal-scale.vis { opacity: 1; transform: scale(1); }
.stagger > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.stagger.vis > * { opacity: 1; transform: translateY(0); }
.stagger > *:nth-child(1) { transition-delay: 0.04s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.12s; }
.stagger > *:nth-child(4) { transition-delay: 0.16s; }
.stagger > *:nth-child(5) { transition-delay: 0.20s; }
.stagger > *:nth-child(6) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .stagger > * { opacity: 1; transform: none; transition: none; }
  *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* mobile nav */
@media (max-width: 720px) {
  .nav-links {
    display: none;
    position: absolute; top: 60px; left: 0; right: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px; gap: 14px; flex-direction: column;
  }
  .nav-links.open { display: flex; }
  .mobile-toggle { display: flex; }
  .nav-links .nav-cta { align-self: flex-start; }
}

/* tagline stripe */
.tagline-stripe {
  padding: 40px 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tagline-stripe .container {
  display: flex; align-items: center; gap: 32px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--muted); overflow: hidden;
}
.tagline-stripe .scroller {
  display: flex; gap: 40px; animation: scroll 28s linear infinite;
  white-space: nowrap;
}
.tagline-stripe .scroller span { display: flex; align-items: center; gap: 8px; }
.tagline-stripe .scroller .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* terminal small-screen font-size */
@media (max-width: 640px) { .terminal { font-size: 11.5px; } }
@media (max-width: 400px) { .terminal-body pre { word-break: break-all; } }

/* back to top */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 99;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s, color 0.2s;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.back-to-top.vis { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* search in nav */
.nav-search {
  margin-left: 8px;
  display: flex; align-items: center;
}
.search-toggle {
  width: 36px; height: 36px;
  background: none; border: 0;
  color: var(--muted); cursor: pointer;
  border-radius: 8px;
  display: grid; place-items: center;
  transition: color 0.2s, background 0.2s;
}
.search-toggle:hover { color: var(--fg); background: var(--border); }
.search-input {
  width: 0; overflow: hidden;
  transition: width 0.3s, padding 0.3s;
  border: 0; outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px; color: var(--fg);
  padding: 0; border-bottom: 1px solid transparent;
}
.search-input.open { width: 180px; padding: 4px 8px; border-bottom-color: var(--accent); }
.search-input::placeholder { color: var(--muted2); }
@media (max-width: 720px) { .search-input.open { width: 120px; } }

/* typewriter subtitle */
.typewriter-wrap {
  display: inline;
  position: relative;
}
.typewriter-text {
  display: inline;
  color: var(--accent);
}
.typewriter-cursor-char {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 0.8s step-end infinite;
}

/* community section */
.community-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.community-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.community-item {
  padding: 32px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: background 0.25s, transform 0.25s;
}
.community-item:hover {
  background: var(--accent-bg);
  transform: translateY(-2px);
}
.community-item svg {
  width: 28px; height: 28px;
  color: var(--accent); margin-bottom: 12px;
}
.community-item h4 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 530; margin-bottom: 6px;
}
.community-item p {
  font-size: 13px; color: var(--muted2); line-height: 1.5;
}

@media (max-width: 840px) { .community-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .community-grid { grid-template-columns: 1fr; } }

/* =============================================
   New WordPress modules — CSS
   ============================================= */

/* featured posts carousel */
.fp-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.fp-carousel::-webkit-scrollbar { height: 4px; }
.fp-carousel::-webkit-scrollbar-track { background: var(--border); border-radius: 4px; }
.fp-carousel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.fp-card { flex: 0 0 340px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.fp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.07); }
.fp-img { height: 140px; background: var(--bg2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); color: var(--muted2); font-size: 12px; font-family: var(--font-mono); }
.fp-body { padding: 20px; }
.fp-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.fp-body h4 { font-family: var(--font-display); font-size: 16px; font-weight: 530; margin-bottom: 6px; }
.fp-body p { font-size: 13px; color: var(--muted2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* dashboard metrics */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dash-card { padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: background 0.25s, transform 0.25s; }
.dash-card:hover { background: var(--accent-bg); transform: translateY(-2px); }
.dash-num { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 620; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; }
.dash-label { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); }
.dash-sub { font-size: 13px; color: var(--muted2); margin-top: 4px; }

@media (max-width: 680px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .dash-grid { grid-template-columns: 1fr; } }

/* tag cloud */
.tagcloud-wrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tagcloud-wrap .tag-lg { padding: 8px 18px; font-size: 16px; }
.tagcloud-wrap .tag-md { padding: 6px 14px; font-size: 14px; }
.tagcloud-wrap .tag-sm { padding: 4px 10px; font-size: 12px; }
.tagcloud-item { border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--fg2); font-family: var(--font-mono); transition: all 0.2s; cursor: default; }
.tagcloud-item:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.tagcloud-count { font-size: 0.75em; opacity: 0.6; margin-left: 4px; }

/* tech stack */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.tech-item { padding: 16px 12px; border: 1px solid var(--border); border-radius: 10px; text-align: center; background: var(--surface); transition: all 0.25s; cursor: default; }
.tech-item:hover { border-color: var(--accent); background: var(--accent-bg); transform: translateY(-2px); }
.tech-icon { font-size: 24px; margin-bottom: 8px; }
.tech-name { font-size: 13px; font-weight: 510; }
.tech-desc { font-size: 11px; color: var(--muted2); margin-top: 2px; }

/* testimonials */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.test-card { padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); position: relative; }
.test-card::before { content: '"'; position: absolute; top: 12px; left: 16px; font-size: 36px; line-height: 1; color: var(--accent); opacity: 0.2; font-family: Georgia, serif; }
.test-text { font-size: 14px; line-height: 1.6; color: var(--fg2); margin-bottom: 16px; font-style: italic; }
.test-author { display: flex; align-items: center; gap: 10px; }
.test-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: var(--font-mono); color: var(--accent); flex-shrink: 0; }
.test-info cite { font-style: normal; font-size: 13px; font-weight: 510; }
.test-info span { display: block; font-size: 11px; color: var(--muted2); }
@media (max-width: 900px) { .test-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .test-grid { grid-template-columns: 1fr; } }

/* author wall */
.author-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.author-card { padding: 24px; border: 1px solid var(--border); border-radius: 12px; text-align: center; background: var(--surface); transition: all 0.25s; }
.author-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.author-avatar-lg { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; font-family: var(--font-display); color: var(--accent); font-weight: 620; }
.author-card h4 { font-family: var(--font-display); font-size: 15px; font-weight: 530; margin-bottom: 2px; }
.author-card .author-role { font-size: 12px; color: var(--muted2); margin-bottom: 8px; }
.author-card .author-bio { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .author-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .author-grid { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--accent); }
.faq-q { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: var(--font-display); font-size: 16px; font-weight: 510; background: var(--surface); transition: background 0.2s; user-select: none; }
.faq-q:hover { background: var(--accent-bg); }
.faq-q .faq-toggle { width: 20px; height: 20px; transition: transform 0.3s; flex-shrink: 0; color: var(--accent); }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; background: var(--surface); }
.faq-item.open .faq-a { max-height: 300px; padding: 0 22px 18px; }
.faq-a p { font-size: 14px; color: var(--muted2); line-height: 1.6; }

/* changelog timeline */
.changelog-wrap { max-width: 700px; margin: 0 auto; position: relative; }
.changelog-wrap::before { content: ''; position: absolute; top: 0; bottom: 0; left: 24px; width: 1.5px; background: var(--border); }
.cl-item { position: relative; padding: 0 0 28px 60px; }
.cl-item:last-child { padding-bottom: 0; }
.cl-dot { position: absolute; left: 18px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.cl-item.highlight .cl-dot { background: var(--accent); }
.cl-version { font-family: var(--font-mono); font-size: 14px; font-weight: 510; color: var(--fg); }
.cl-date { font-size: 12px; color: var(--muted); margin-left: 8px; }
.cl-desc { font-size: 14px; color: var(--muted2); margin-top: 4px; }
.cl-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.cl-tags .tag { font-size: 11px; padding: 2px 8px; }

/* github activity */
.gh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gh-card { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all 0.25s; }
.gh-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.gh-repo { font-family: var(--font-mono); font-size: 13px; font-weight: 510; margin-bottom: 4px; }
.gh-repo svg { vertical-align: middle; margin-right: 4px; }
.gh-desc { font-size: 12px; color: var(--muted2); line-height: 1.5; }
.gh-meta { font-size: 11px; color: var(--muted); margin-top: 8px; display: flex; gap: 10px; }
.gh-meta span { display: flex; align-items: center; gap: 3px; }
@media (max-width: 900px) { .gh-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .gh-grid { grid-template-columns: 1fr; } }

/* sponsors grid */
.sponsor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sponsor-item { padding: 24px; border: 1px solid var(--border); border-radius: 10px; text-align: center; background: var(--surface); transition: all 0.25s; }
.sponsor-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.sponsor-logo { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 10px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.sponsor-item h4 { font-family: var(--font-display); font-size: 14px; font-weight: 530; margin-bottom: 2px; }
.sponsor-item p { font-size: 11px; color: var(--muted2); }
.sponsor-tier { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.sponsor-tier.platinum { background: #e8e0d0; color: #8a7a5a; }
.sponsor-tier.gold { background: #f5e8c8; color: #b8962a; }
.sponsor-tier.silver { background: #e8e8f0; color: #7a7a8a; }
@media (max-width: 800px) { .sponsor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sponsor-grid { grid-template-columns: 1fr; } }

/* contributor grid */
.contrib-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.contrib-item { text-align: center; padding: 16px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all 0.25s; }
.contrib-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.contrib-avatar { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.contrib-item h5 { font-size: 12px; font-weight: 510; }
.contrib-item .contrib-pr { font-size: 10px; color: var(--muted2); }
@media (max-width: 800px) { .contrib-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 500px) { .contrib-grid { grid-template-columns: repeat(3, 1fr); } }

/* docs links */
.docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.doc-card { padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all 0.25s; }
.doc-card:hover { border-color: var(--accent); background: var(--accent-bg); transform: translateY(-2px); }
.doc-card svg { color: var(--accent); margin-bottom: 10px; }
.doc-card h4 { font-family: var(--font-display); font-size: 15px; font-weight: 530; margin-bottom: 4px; }
.doc-card p { font-size: 13px; color: var(--muted2); line-height: 1.5; }
@media (max-width: 800px) { .docs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 450px) { .docs-grid { grid-template-columns: 1fr; } }

/* donate cards */
.donate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 700px; margin: 0 auto; }
.donate-card { padding: 32px 24px; border: 1px solid var(--border); border-radius: 12px; text-align: center; background: var(--surface); transition: all 0.25s; }
.donate-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.07); }
.donate-card.featured { border-color: var(--accent); background: var(--accent-bg); }
.donate-amount { font-family: var(--font-display); font-size: 28px; font-weight: 620; color: var(--accent); margin-bottom: 8px; }
.donate-card p { font-size: 13px; color: var(--muted2); margin-bottom: 16px; }
@media (max-width: 600px) { .donate-grid { grid-template-columns: 1fr; } }

/* newsletter */
.newsletter-box { max-width: 520px; margin: 0 auto; text-align: center; }
.newsletter-box p { font-size: 14px; color: var(--muted2); margin-bottom: 18px; }
.nl-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.nl-form input { flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 14px; background: var(--surface); color: var(--fg); outline: none; transition: border-color 0.2s; }
.nl-form input:focus { border-color: var(--accent); }
.nl-form input::placeholder { color: var(--muted2); }
@media (max-width: 480px) { .nl-form { flex-direction: column; } }

/* WordPress admin bar offset */
.admin-bar nav { top: 32px; }
.admin-bar .back-to-top { bottom: 64px; }


/* ===== AmberPress reference CSS from blog.html ===== */

:root {
  --bg:      oklch(95.5% 0.02 75);
  --bg2:     oklch(93% 0.025 75);
  --surface: oklch(100% 0 0);
  --surface-glass: oklch(100% 0 0 / 0.7);
  --fg:      oklch(18% 0.02 75);
  --fg2:     oklch(32% 0.015 75);
  --muted:   oklch(48% 0.014 75);
  --muted2:  oklch(62% 0.01 75);
  --border:  oklch(88% 0.015 75);
  --accent:  oklch(68% 0.20 75);
  --accent-dim: oklch(56% 0.20 75);
  --accent-bg: oklch(70% 0.16 75 / 0.10);
  --code-bg: oklch(16% 0.015 75);
  --code-line: oklch(24% 0.01 75);

  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --container: 1200px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1 { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 60px); font-weight: 620; line-height: 1.08; letter-spacing: -0.028em; }
h2 { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 580; line-height: 1.18; letter-spacing: -0.018em; }
h3 { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 530; line-height: 1.3; letter-spacing: -0.008em; }
h4 { font-family: var(--font-body); font-size: 16px; font-weight: 530; line-height: 1.4; letter-spacing: 0; }

.body-large { font-size: 17px; line-height: 1.65; color: var(--muted); }
.body-small { font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
nav.scrolled { box-shadow: 0 1px 12px rgba(0,0,0,0.04); }
nav .container { display: flex; align-items: center; height: 60px; }
.nav-logo { display: flex; align-items: center; gap: 8px; font-weight: 620; font-size: 18px; letter-spacing: -0.02em; }
.nav-logo svg { flex-shrink: 0; }
.nav-links {
  display: flex; align-items: center; gap: 28px;
  margin-left: auto; list-style: none;
}
.nav-links a {
  font-size: 14px; font-weight: 510; letter-spacing: 0.02em;
  color: var(--muted); transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transition: transform 0.3s;
  transform-origin: right;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .nav-cta::after { display: none; }
.nav-links a.active { color: var(--fg); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px;
  background: var(--accent); color: #fff;
  border-radius: 8px; font-size: 14px; font-weight: 510; letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--accent-dim); transform: translateY(-1px); }
.nav-cta svg { transition: transform 0.2s; }
.nav-cta:hover svg { transform: translateX(3px); }
.mobile-toggle {
  display: none; margin-left: auto;
  background: none; border: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg);
  border-radius: 8px;
}
.mobile-toggle:hover { background: var(--border); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

.page-header {
  padding: 140px 0 60px;
  position: relative;
}
.page-header::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 50%; height: 120%;
  background: radial-gradient(ellipse at 30% 40%, oklch(78% 0.10 75 / 0.15), transparent 70%);
  pointer-events: none;
}
.page-header .container { position: relative; }
.page-header p { margin-top: 12px; max-width: 56ch; }
.breadcrumb {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  padding-bottom: 80px;
}
.blog-main { min-width: 0; }

.post-card {
  display: flex;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.3s;
}
.post-card:first-child { padding-top: 0; }
.post-card-thumb {
  width: 200px; height: 134px;
  flex-shrink: 0;
  border-radius: 10px;
  background: oklch(90% 0.008 80);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  border: 1px solid var(--border);
  overflow: hidden;
}
.post-card-body { flex: 1; }
.post-card-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.post-card-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.post-card h3 {
  font-size: 20px; margin-bottom: 8px;
  transition: color 0.2s;
}
.post-card:hover h3 { color: var(--accent); }
.post-card-excerpt {
  font-size: 15px; color: var(--muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-footer {
  display: flex; align-items: center; gap: 16px; margin-top: 16px;
}
.post-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.post-card-tags .tag {
  padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-family: var(--font-mono); font-weight: 510;
  background: oklch(68% 0.20 75 / 0.08);
  color: var(--accent-dim);
  border: 1px solid oklch(68% 0.20 75 / 0.12);
}
.post-card-read {
  margin-left: auto;
  font-size: 14px; font-weight: 510; color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.post-card-read svg { transition: transform 0.2s; }
.post-card:hover .post-card-read svg { transform: translateX(4px); }

@media (max-width: 740px) {
  .post-card { flex-direction: column; gap: 16px; }
  .post-card-thumb { width: 100%; height: 180px; }
}

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--border);
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px; font-weight: 510;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.2s;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.pagination .dots { border: none; background: none; min-width: 32px; }

.sidebar { position: sticky; top: 96px; align-self: start; }
.sidebar-section {
  margin-bottom: 32px;
}
.sidebar-section h4 {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); margin-bottom: 16px; font-weight: 510;
}
.sidebar-search {
  display: flex; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  background: var(--surface);
}
.sidebar-search input {
  flex: 1; padding: 12px 16px; border: 0;
  font-family: var(--font-body); font-size: 14px;
  background: transparent; color: var(--fg);
  outline: none;
}
.sidebar-search input::placeholder { color: var(--muted); }
.sidebar-search button {
  padding: 12px 16px; border: 0; background: none;
  color: var(--muted); cursor: pointer;
  transition: color 0.2s;
}
.sidebar-search button:hover { color: var(--accent); }

.sidebar-cats { list-style: none; }
.sidebar-cats li { border-bottom: 1px solid var(--border); }
.sidebar-cats a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  font-size: 14px; color: var(--muted); transition: color 0.2s;
}
.sidebar-cats a:hover { color: var(--accent); }
.sidebar-cats span { font-family: var(--font-mono); font-size: 12px; color: var(--border); }

.sidebar-posts { list-style: none; }
.sidebar-posts li { margin-bottom: 16px; }
.sidebar-posts a {
  display: block; font-size: 15px; font-weight: 510;
  line-height: 1.4; transition: color 0.2s;
}
.sidebar-posts a:hover { color: var(--accent); }
.sidebar-posts .meta {
  display: block; font-size: 12px; color: var(--muted); margin-top: 4px;
  font-family: var(--font-mono);
}

.sidebar-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sidebar-tags a {
  padding: 6px 14px; border-radius: 8px;
  font-size: 13px; font-family: var(--font-mono);
  background: oklch(68% 0.20 75 / 0.06);
  color: var(--muted); transition: all 0.2s;
  border: 1px solid transparent;
}
.sidebar-tags a:hover {
  background: oklch(68% 0.20 75 / 0.12);
  color: var(--accent-dim);
  border-color: oklch(68% 0.20 75 / 0.12);
}

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

footer {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}
footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 36ch; }
footer h5 {
  font-size: 13px; font-weight: 510; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg); margin-bottom: 16px;
}
footer ul { list-style: none; }
footer ul li { margin-bottom: 10px; }
footer ul a { font-size: 14px; color: var(--muted); transition: color 0.2s; }
footer ul a:hover { color: var(--accent); }
.footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: 24px; margin-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted);
}

@media (max-width: 900px) {
  footer .container { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  footer .container { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}

@media (max-width: 720px) {
  .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0;
    background: var(--surface-glass); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px; gap: 16px; flex-direction: column; }
  .nav-links.open { display: flex; }
  .mobile-toggle { display: flex; }
  .nav-links .nav-cta { align-self: flex-start; }
}

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.vis { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger.vis > * { opacity: 1; transform: translateY(0); }
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.stagger > *:nth-child(4) { transition-delay: 0.2s; }
.stagger > *:nth-child(5) { transition-delay: 0.25s; }
.stagger > *:nth-child(6) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
  *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ===== AmberPress reference CSS from archive.html ===== */

:root {
  --bg: oklch(95.5% 0.02 75);
  --bg2: oklch(93% 0.025 75);
  --surface: oklch(100% 0 0);
  --surface-glass: oklch(100% 0 0 / 0.7);
  --fg: oklch(18% 0.02 75);
  --fg2: oklch(32% 0.015 75);
  --muted: oklch(48% 0.014 75);
  --muted2: oklch(62% 0.01 75);
  --border: oklch(88% 0.015 75);
  --accent: oklch(68% 0.20 75);
  --accent-dim: oklch(56% 0.20 75);
  --accent-bg: oklch(70% 0.16 75 / 0.10);
  --code-bg: oklch(16% 0.015 75);
  --code-line: oklch(24% 0.01 75);
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --container: 1200px;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1 { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 60px); font-weight: 620; line-height: 1.08; letter-spacing: -0.028em; }
h2 { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 580; line-height: 1.18; letter-spacing: -0.018em; }
h3 { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 530; line-height: 1.3; letter-spacing: -0.008em; }

h4 { font-family: var(--font-display); font-size: 16px; font-weight: 530; line-height: 1.4; letter-spacing: 0; }
.body-large { font-size: 17px; line-height: 1.65; color: var(--muted); }
.body-small { font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* nav */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background 0.18s cubic-bezier(0.2, 0, 0, 1), backdrop-filter 0.18s cubic-bezier(0.2, 0, 0, 1), border-color 0.18s cubic-bezier(0.2, 0, 0, 1);
}
nav.scrolled { background: oklch(100% 0 0 / 0.85); }
nav .container { display: flex; align-items: center; height: 60px; }
.nav-logo { display: flex; align-items: center; gap: 8px; font-weight: 620; font-size: 18px; letter-spacing: -0.02em; }
.nav-logo svg { flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; list-style: none; }
.nav-links a {
  font-size: 14px; font-weight: 510; letter-spacing: 0.02em;
  color: var(--muted); transition: color var(--m-fast) var(--m-ease); position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transition: transform var(--m-fast) var(--m-ease); transform-origin: right;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.active { color: var(--fg); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links .nav-cta::after { display: none; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px;
  background: var(--accent); color: #fff;
  border-radius: 8px; font-size: 14px; font-weight: 510; letter-spacing: 0.02em;
  transition: background var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease);
}
.nav-cta:hover { background: var(--accent-dim); transform: translateY(-1px); }
.nav-cta svg { transition: transform var(--m-fast) var(--m-ease); }
.nav-cta:hover svg { transform: translateX(3px); }
.mobile-toggle {
  display: none; margin-left: auto;
  background: none; border: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg); border-radius: 8px;
}
.mobile-toggle:hover { background: var(--border); }

/* focus-visible */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* page header */
.page-header {
  padding: 140px 0 64px;
  position: relative; overflow: hidden;
}
.page-header .container { position: relative; }
.page-glow {
  position: absolute;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: 90%; height: 160%;
  background: radial-gradient(ellipse at 50% 30%, oklch(78% 0.12 75 / 0.18), transparent 65%);
  pointer-events: none;
}
.breadcrumb {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px; position: relative; z-index: 1;
}
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }
.page-header h1 { margin-bottom: 12px; position: relative; z-index: 1; }
.page-header h1 .accent-word { color: var(--accent); }

.archive-stats {
  display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; position: relative; z-index: 1;
}
.archive-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
  transition: border-color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease);
  cursor: default;
}
.archive-stat:hover { border-color: oklch(68% 0.20 75 / 0.25); transform: translateY(-1px); }
.archive-stat .num {
  font-family: var(--font-display); font-size: 26px; font-weight: 620;
  color: var(--accent); line-height: 1;
}
.archive-stat .label { font-size: 13px; color: var(--muted); }

/* search bar */
.search-bar {
  display: flex; gap: 8px; margin-top: 24px; position: relative; z-index: 1;
  max-width: 480px;
}
.search-bar input {
  flex: 1; padding: 10px 16px; border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--font-body); font-size: 14px;
  background: var(--surface); color: var(--fg); outline: none;
  transition: border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease);
}
.search-bar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(68% 0.20 75 / 0.15);
}
.search-bar input::placeholder { color: var(--muted2); }
.search-bar button {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 20px; background: var(--accent); color: #fff;
  border: 0; border-radius: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 510;
  transition: background var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease);
}
.search-bar button:hover { background: var(--accent-dim); transform: translateY(-1px); }

/* archive layout */
.archive-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  padding-bottom: 80px;
}
.archive-main { min-width: 0; }

/* section rhythm */
.archive-main .section-label {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.archive-main .section-label::before {
  content: ''; display: inline-block;
  width: 20px; height: 1.5px; background: var(--accent);
}

/* category grid */
.archive-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}
.cat-card {
  padding: 24px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
  transition: background var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease);
}
.cat-card:hover {
  background: var(--accent-bg);
  border-color: oklch(68% 0.20 75 / 0.2);
  transform: translateY(-3px);
}
.cat-card .cat-icon {
  width: 28px; height: 28px; margin-bottom: 12px;
  color: var(--accent);
}
.cat-card .cat-name { font-family: var(--font-display); font-size: 16px; font-weight: 510; line-height: 1.3; }
.cat-card .cat-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent-dim); margin-top: 4px; }
.cat-card .cat-desc { font-size: 14px; color: var(--muted2); margin-top: 8px; line-height: 1.55; }

@media (max-width: 840px) { .archive-cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .archive-cat-grid { grid-template-columns: 1fr; } }

/* year entries */
.archive-year { margin-bottom: 48px; }
.archive-year-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 2px solid var(--fg);
}
.archive-year-header .count {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted2);
  background: var(--accent-bg); padding: 3px 12px; border-radius: 6px;
}

.entry-list { list-style: none; }
.entry-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 18px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--border);
  transition: background var(--m-fast) var(--m-ease), padding-left var(--m-fast) var(--m-ease);
  border-radius: 8px; position: relative;
}
.entry-item::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transition: transform var(--m-fast) var(--m-ease);
  border-radius: 1px;
}
.entry-item:last-child { border-bottom: 0; }
.entry-item:hover { background: var(--accent-bg); }
.entry-item:hover::before { transform: scaleY(1); }
.entry-item:hover .entry-title { color: var(--accent); }
.entry-item:hover .entry-date .day { color: var(--accent); }
.entry-date {
  width: 52px; flex-shrink: 0; text-align: center;
  font-family: var(--font-mono); line-height: 1.2;
  padding-top: 2px;
}
.entry-date .day {
  display: block; font-size: 20px; font-weight: 620; color: var(--fg); line-height: 1.1;
}
.entry-date .mon {
  display: block; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.entry-body { flex: 1; min-width: 0; }
.entry-title {
  font-size: 16px; font-weight: 510; line-height: 1.45;
  transition: color var(--m-fast) var(--m-ease);
}
.entry-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 5px; font-size: 13px; color: var(--muted2);
}
.entry-meta .cat { color: var(--muted); }
.entry-meta .tag {
  padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-family: var(--font-mono); font-weight: 510;
  background: var(--accent-bg); color: var(--accent-dim);
  border: 1px solid oklch(68% 0.20 75 / 0.12);
}

@media (max-width: 640px) {
  .entry-item { gap: 14px; }
  .entry-date { width: 44px; }
  .entry-date .day { font-size: 17px; }
  .entry-date .mon { font-size: 9px; }
}

/* sidebar */
.sidebar { position: sticky; top: 88px; align-self: start; }
.sidebar-section {
  margin-bottom: 28px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sidebar-section h4 {
  font-size: 12px; font-weight: 510; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg); margin-bottom: 16px;
}

.archive-months { list-style: none; }
.archive-months li + li { border-top: 1px solid var(--border); }
.archive-months a {
  display: flex; justify-content: space-between;
  padding: 10px 12px; margin: 0 -12px;
  font-size: 14px; color: var(--muted); border-radius: 6px;
  transition: color var(--m-fast) var(--m-ease), background var(--m-fast) var(--m-ease);
}
.archive-months a:hover { color: var(--accent); background: var(--accent-bg); }
.archive-months span { font-family: var(--font-mono); font-size: 12px; color: var(--muted2); }

.sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar-tags a {
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-family: var(--font-mono); font-weight: 510;
  background: var(--accent-bg); color: var(--accent-dim);
  border: 1px solid oklch(68% 0.20 75 / 0.12);
  transition: background var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease);
}
.sidebar-tags a:hover { background: oklch(68% 0.20 75 / 0.18); border-color: oklch(68% 0.20 75 / 0.25); transform: translateY(-1px); }

.sidebar-about p { font-size: 14px; color: var(--muted); line-height: 1.65; }

@media (max-width: 900px) {
  .archive-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* footer */
footer {
  padding: 48px 0 32px;
  border-top: 1px solid var(--border);
}
footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 10px; max-width: 34ch; }
footer h5 {
  font-size: 12px; font-weight: 510; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg); margin-bottom: 14px;
}
footer ul { list-style: none; }
footer ul li { margin-bottom: 8px; }
footer ul a { font-size: 14px; color: var(--muted); transition: color var(--m-fast) var(--m-ease); }
footer ul a:hover { color: var(--accent); }
.footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: 20px; margin-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted);
}
@media (max-width: 768px) {
  footer .container { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  footer .container { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
}

/* mobile nav */
@media (max-width: 720px) {
  .nav-links {
    display: none;
    position: absolute; top: 60px; left: 0; right: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px; gap: 14px; flex-direction: column;
  }
  .nav-links.open { display: flex; }
  .mobile-toggle { display: flex; }
  .nav-links .nav-cta { align-self: flex-start; }
}

/* emilkowalski-style motion — single language */
:root { --m-ease: cubic-bezier(0.2, 0, 0, 1); --m-fast: 0.18s; --m-base: 0.35s; }

.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease);
}
.reveal.vis { opacity: 1; transform: translateY(0); }

.stagger > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease);
}
.stagger.vis > * { opacity: 1; transform: translateY(0); }
.stagger > *:nth-child(1) { transition-delay: 0.04s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.12s; }
.stagger > *:nth-child(4) { transition-delay: 0.16s; }
.stagger > *:nth-child(5) { transition-delay: 0.20s; }
.stagger > *:nth-child(6) { transition-delay: 0.24s; }
.stagger > *:nth-child(7) { transition-delay: 0.28s; }
.stagger > *:nth-child(8) { transition-delay: 0.32s; }

/* stat card stagger — uses data-delay for JS-driven entry */
.stat-reveal {
  opacity: 0; transform: translateY(18px) scale(0.97);
  transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease);
}
.stat-reveal.vis { opacity: 1; transform: translateY(0) scale(1); }

/* search empty state */
.search-empty-enter {
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease);
}
.search-empty-enter.vis { opacity: 1; transform: translateY(0); }

/* ========= module: content-type filter ========= */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px;
  position: relative; z-index: 1;
}
.filter-pill {
  padding: 7px 18px; border-radius: 999px;
  font-family: var(--font-body); font-size: 13px; font-weight: 510;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer; transition: all var(--m-fast) var(--m-ease);
}
.filter-pill:hover { border-color: var(--accent); color: var(--fg); }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ========= module: timeline heatmap ========= */
.timeline-wrap { margin-bottom: 56px; position: relative; z-index: 1; }
.timeline-heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 18px; }
.timeline-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 6px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; transition: all var(--m-fast) var(--m-ease);
  cursor: default;
}
.timeline-cell:hover {
  transform: translateY(-2px);
  border-color: oklch(68% 0.20 75 / 0.25);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.04);
}
.timeline-cell .mon-label { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }
.timeline-bar {
  width: 100%; height: 6px; border-radius: 3px;
  background: oklch(88% 0.015 75);
  overflow: hidden; position: relative;
}
.timeline-bar-fill {
  height: 100%; border-radius: 3px;
  background: var(--accent); transition: width 0.6s var(--m-ease);
}
.timeline-cell .count-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg2); }
.timeline-years {
  display: flex; gap: 8px; margin-top: 12px;
}
.timeline-year {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: var(--font-mono);
  transition: all var(--m-fast) var(--m-ease);
}
.timeline-year:hover { border-color: var(--accent); transform: translateY(-1px); }
.timeline-year .yr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline-year .yr-count { font-weight: 510; color: var(--fg); }
.timeline-year .yr-total { color: var(--muted2); }

/* ========= module: popular posts Top 10 ========= */
.popular-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-bottom: 56px;
}
.popular-card {
  padding: 22px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface);
  transition: all var(--m-base) var(--m-ease);
  cursor: default; position: relative; overflow: hidden;
}
.popular-card:hover { transform: translateY(-3px); border-color: oklch(68% 0.20 75 / 0.2); }
.popular-card .rank {
  font-family: var(--font-display); font-size: 32px; font-weight: 620;
  color: oklch(88% 0.015 75); line-height: 1; margin-bottom: 8px;
  transition: color var(--m-fast) var(--m-ease);
}
.popular-card:nth-child(1) .rank,
.popular-card:nth-child(2) .rank,
.popular-card:nth-child(3) .rank { color: var(--accent); }
.popular-card:hover .rank { color: var(--accent); }
.popular-card .p-title { font-size: 13px; font-weight: 510; line-height: 1.4; margin-bottom: 6px; }
.popular-card .p-meta { font-size: 11px; color: var(--muted2); font-family: var(--font-mono); }
.popular-card .read-icon {
  position: absolute; bottom: 14px; right: 14px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--border); color: var(--muted);
  transition: all var(--m-fast) var(--m-ease);
}
.popular-card:hover .read-icon { background: var(--accent); color: #fff; transform: translate(2px, -2px); }

@media (max-width: 1000px) { .popular-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .popular-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .popular-grid { grid-template-columns: 1fr; } }

/* ========= module: word count distribution ========= */
.wordcount-section { margin-bottom: 56px; }
.wc-chart { display: flex; gap: 12px; align-items: flex-end; margin-top: 18px; height: 140px; }
.wc-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.wc-bar {
  width: 100%; max-width: 60px; border-radius: 4px 4px 0 0;
  background: var(--accent); min-height: 4px;
  transition: height 0.6s var(--m-ease);
  opacity: 0.75;
}
.wc-bar-group:nth-child(1) .wc-bar { height: 100%; opacity: 1; }
.wc-bar-group:nth-child(2) .wc-bar { height: 78%; }
.wc-bar-group:nth-child(3) .wc-bar { height: 52%; }
.wc-bar-group:nth-child(4) .wc-bar { height: 30%; }
.wc-bar-group:nth-child(5) .wc-bar { height: 14%; }
.wc-bar-group .wc-label { font-size: 11px; color: var(--muted2); font-family: var(--font-mono); white-space: nowrap; }
.wc-bar-group .wc-val { font-size: 13px; font-weight: 510; color: var(--fg); font-family: var(--font-display); }

/* ========= module: series index ========= */
.series-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 56px;
}
.series-card {
  padding: 24px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
  transition: all var(--m-base) var(--m-ease);
}
.series-card:hover { transform: translateY(-3px); border-color: oklch(68% 0.20 75 / 0.25); }
.series-card .s-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--accent); margin-bottom: 8px;
}
.series-card .s-name { font-size: 16px; font-weight: 510; line-height: 1.35; margin-bottom: 6px; }
.series-card .s-count { font-size: 12px; color: var(--muted2); font-family: var(--font-mono); }
.series-card .s-progress {
  margin-top: 14px; height: 4px; border-radius: 2px;
  background: var(--border); overflow: hidden;
}
.series-card .s-progress-fill {
  height: 100%; border-radius: 2px;
  background: var(--accent); transition: width 0.6s var(--m-ease);
}
@media (max-width: 840px) { .series-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .series-grid { grid-template-columns: 1fr; } }

/* ========= module: contributor wall ========= */
.contributor-section { margin-bottom: 56px; }
.contributor-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px; margin-top: 18px;
}
.contributor-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 20px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
  transition: all var(--m-fast) var(--m-ease);
  cursor: default;
}
.contributor-item:hover { transform: translateY(-2px); border-color: oklch(68% 0.20 75 / 0.25); }
.contributor-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-bg); display: grid; place-items: center;
  color: var(--accent); font-family: var(--font-display); font-weight: 620; font-size: 18px;
  border: 1px solid oklch(68% 0.20 75 / 0.12);
  flex-shrink: 0;
}
.contributor-item .c-name { font-size: 13px; font-weight: 510; }
.contributor-item .c-role { font-size: 11px; color: var(--muted2); text-align: center; }
.contributor-item .c-contrib {
  font-size: 10px; font-family: var(--font-mono);
  color: var(--accent-dim); letter-spacing: 0.06em;
}
@media (max-width: 900px) { .contributor-wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 540px) { .contributor-wall { grid-template-columns: repeat(3, 1fr); } }

/* ========= sidebar: author archive ========= */
.author-list { list-style: none; }
.author-list li + li { border-top: 1px solid var(--border); }
.author-list a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin: 0 -12px;
  border-radius: 8px; transition: all var(--m-fast) var(--m-ease);
  color: var(--muted); font-size: 14px;
}
.author-list a:hover { background: var(--accent-bg); color: var(--fg); }
.author-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-bg); display: grid; place-items: center;
  color: var(--accent); font-family: var(--font-display); font-weight: 620; font-size: 14px;
  flex-shrink: 0;
}
.author-list .a-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted2); }

/* ========= sidebar: RSS ========= */
.rss-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--accent-bg);
  transition: all var(--m-fast) var(--m-ease);
  cursor: default;
}
.rss-card:hover { border-color: oklch(68% 0.20 75 / 0.25); }
.rss-card svg { flex-shrink: 0; color: var(--accent); }
.rss-card .rss-text { flex: 1; }
.rss-card .rss-title { font-size: 14px; font-weight: 510; }
.rss-card .rss-desc { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.rss-card .rss-btn {
  padding: 6px 14px; border-radius: 6px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 510; border: 0;
  cursor: pointer; transition: background var(--m-fast) var(--m-ease);
}
.rss-card .rss-btn:hover { background: var(--accent-dim); }

/* ========= sidebar: popular sidebar ========= */
.sidebar-popular { list-style: none; }
.sidebar-popular li { margin-bottom: 14px; }
.sidebar-popular a {
  display: flex; gap: 10px; align-items: flex-start;
  transition: color var(--m-fast) var(--m-ease);
}
.sidebar-popular a:hover .sp-title { color: var(--accent); }
.sidebar-popular .sp-rank {
  font-family: var(--font-display); font-size: 18px; font-weight: 620;
  color: oklch(88% 0.015 75); line-height: 1.2; min-width: 22px;
}
.sidebar-popular a:nth-child(1) .sp-rank { color: var(--accent); }
.sidebar-popular a:nth-child(2) .sp-rank { color: var(--accent); }
.sidebar-popular a:nth-child(3) .sp-rank { color: var(--accent); }
.sidebar-popular .sp-title { font-size: 13px; font-weight: 510; line-height: 1.35; }
.sidebar-popular .sp-meta { font-size: 11px; color: var(--muted2); font-family: var(--font-mono); display: block; margin-top: 2px; }

/* stagger refinements for more items */
.stagger > *:nth-child(9) { transition-delay: 0.36s; }
.stagger > *:nth-child(10) { transition-delay: 0.40s; }
.stagger > *:nth-child(11) { transition-delay: 0.44s; }
.stagger > *:nth-child(12) { transition-delay: 0.48s; }
.stagger > *:nth-child(13) { transition-delay: 0.52s; }
.stagger > *:nth-child(14) { transition-delay: 0.56s; }
.stagger > *:nth-child(15) { transition-delay: 0.60s; }
.stagger > *:nth-child(16) { transition-delay: 0.64s; }
.stagger > *:nth-child(17) { transition-delay: 0.68s; }
.stagger > *:nth-child(18) { transition-delay: 0.72s; }
.stagger > *:nth-child(19) { transition-delay: 0.76s; }
.stagger > *:nth-child(20) { transition-delay: 0.80s; }

/* ========= module: stats overview ========= */
.stats-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 56px; }
.stat-ov-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: center; transition: all var(--m-fast) var(--m-ease); }
.stat-ov-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.stat-ov-card .sval { font-family: var(--font-display); font-size: 32px; font-weight: 620; color: var(--accent); line-height: 1.1; letter-spacing: -0.02em; }
.stat-ov-card .slabel { font-size: 13px; color: var(--muted); margin-top: 4px; }
.stat-ov-card .sdesc { font-size: 11px; color: var(--muted2); margin-top: 2px; font-family: var(--font-mono); }
@media (max-width:768px) { .stats-overview { grid-template-columns: 1fr 1fr; } }
@media (max-width:440px) { .stats-overview { grid-template-columns: 1fr; } }

/* ========= module: editor picks ========= */
.picks-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 56px; }
.pick-card { padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all var(--m-base) var(--m-ease); cursor: default; position: relative; }
.pick-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.pick-card .pick-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--accent-bg); color: var(--accent-dim); font-size: 10px; font-family: var(--font-mono); border-radius: 4px; letter-spacing: 0.06em; margin-bottom: 10px; }
.pick-card .pick-quote { font-size: 14px; line-height: 1.5; color: var(--fg2); font-style: italic; margin-bottom: 8px; } 
.pick-card .pick-author { font-size: 12px; color: var(--muted2); display: flex; align-items: center; gap: 6px; }
.pick-card .pick-author::before { content: ''; width: 14px; height: 1.5px; background: var(--accent); }
@media (max-width:1000px) { .picks-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:540px) { .picks-grid { grid-template-columns: 1fr; } }

/* ========= module: code snippets ========= */
.snippet-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 56px; }
.snip-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all var(--m-base) var(--m-ease); }
.snip-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.snip-card .snip-lang { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
.snip-card .snip-code { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--fg); background: var(--code-bg); padding: 12px; border-radius: 8px; overflow-x: auto; white-space: pre; }
.snip-card .snip-desc { font-size: 12px; color: var(--muted); margin-top: 8px; }
@media (max-width:900px) { .snippet-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:540px) { .snippet-grid { grid-template-columns: 1fr; } }

/* ========= module: recommended tools ========= */
.tools-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-bottom: 56px; }
.tool-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all var(--m-base) var(--m-ease); text-align: center; }
.tool-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.tool-card .tool-icon { width: 36px; height: 36px; margin: 0 auto 10px; color: var(--accent); }
.tool-card .tool-name { font-size: 14px; font-weight: 510; }
.tool-card .tool-cat { font-size: 11px; color: var(--muted2); font-family: var(--font-mono); margin-top: 3px; }
.tool-card .tool-count { font-size: 10px; color: var(--accent-dim); font-family: var(--font-mono); margin-top: 6px; }
@media (max-width:1000px) { .tools-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:540px) { .tools-grid { grid-template-columns: 1fr 1fr; } }

/* ========= module: github repos ========= */
.repo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 56px; }
.repo-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all var(--m-base) var(--m-ease); }
.repo-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.repo-card .repo-name { font-size: 14px; font-weight: 510; font-family: var(--font-mono); }
.repo-card .repo-name svg { vertical-align: middle; margin-right: 4px; color: var(--muted); }
.repo-card .repo-desc { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.repo-card .repo-meta { display: flex; gap: 12px; margin-top: 10px; font-size: 11px; font-family: var(--font-mono); color: var(--muted2); }
.repo-card .repo-meta span { display: flex; align-items: center; gap: 3px; }
@media (max-width:1000px) { .repo-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:540px) { .repo-grid { grid-template-columns: 1fr; } }

/* ========= module: book list ========= */
.books-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 56px; }
.book-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all var(--m-base) var(--m-ease); display: flex; gap: 14px; align-items: flex-start; }
.book-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.book-card .book-cover { width: 48px; height: 64px; border-radius: 4px; background: var(--accent-bg); flex-shrink: 0; display: grid; place-items: center; color: var(--accent); font-family: var(--font-display); font-size: 20px; font-weight: 620; border: 1px solid var(--border); }
.book-card .book-info { flex: 1; min-width: 0; }
.book-card .book-title { font-size: 14px; font-weight: 510; line-height: 1.35; }
.book-card .book-author { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.book-card .book-ref { font-size: 11px; color: var(--accent-dim); font-family: var(--font-mono); margin-top: 4px; }
@media (max-width:768px) { .books-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:440px) { .books-grid { grid-template-columns: 1fr; } }

/* ========= module: newsletter issues ========= */
.newsletter-list { margin-bottom: 56px; }
.nl-item { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 8px; transition: all var(--m-fast) var(--m-ease); }
.nl-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.nl-item .nl-num { font-family: var(--font-display); font-size: 22px; font-weight: 620; color: oklch(88% 0.015 75); min-width: 28px; text-align: center; }
.nl-item .nl-info { flex: 1; }
.nl-item .nl-title { font-size: 14px; font-weight: 510; }
.nl-item .nl-meta { font-size: 12px; color: var(--muted2); margin-top: 2px; font-family: var(--font-mono); }
.nl-item .nl-tag { padding: 4px 10px; border-radius: 4px; font-size: 10px; font-family: var(--font-mono); background: var(--accent-bg); color: var(--accent-dim); border: 1px solid var(--border); }

/* ========= module: SEO keywords ========= */
.seo-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 56px; }
.seo-tag { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-family: var(--font-mono); border: 1px solid var(--border); background: var(--surface); transition: all var(--m-fast) var(--m-ease); cursor: default; }
.seo-tag:hover { border-color: var(--accent); transform: translateY(-1px); }
.seo-tag .sq { font-weight: 510; color: var(--fg); }
.seo-tag .sr { font-size: 10px; color: var(--muted2); margin-left: 4px; }
.seo-tag.hot { background: var(--accent-bg); border-color: var(--accent); }
.seo-tag.warm { background: oklch(68% 0.20 75 / 0.06); }

/* ========= module: interactive ranking ========= */
.interact-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 56px; }
.interact-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all var(--m-fast) var(--m-ease); }
.interact-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.interact-card .i-rank { font-family: var(--font-display); font-size: 20px; font-weight: 620; color: oklch(88% 0.015 75); min-width: 26px; }
.interact-card:nth-child(1) .i-rank, .interact-card:nth-child(2) .i-rank, .interact-card:nth-child(3) .i-rank { color: var(--accent); }
.interact-card .i-title { font-size: 14px; font-weight: 510; line-height: 1.35; flex: 1; }
.interact-card .i-stat { font-family: var(--font-mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
@media (max-width:640px) { .interact-list { grid-template-columns: 1fr; } }

/* ========= module: reader distribution ========= */
.reader-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 56px; }
.reader-card { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: all var(--m-fast) var(--m-ease); text-align: center; }
.reader-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.reader-card .r-flag { font-size: 28px; margin-bottom: 6px; }
.reader-card .r-name { font-size: 13px; font-weight: 510; }
.reader-card .r-pct { font-size: 11px; color: var(--muted2); font-family: var(--font-mono); margin-top: 3px; }
.reader-card .r-bar { margin-top: 8px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.reader-card .r-bar-fill { height: 100%; border-radius: 2px; background: var(--accent); }
@media (max-width:800px) { .reader-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:440px) { .reader-grid { grid-template-columns: 1fr 1fr; } }

/* ========= sidebar: community/discord ========= */
.commu-card { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-bg); transition: all var(--m-fast) var(--m-ease); cursor: default; }
.commu-card:hover { border-color: var(--accent); }
.commu-card svg { flex-shrink: 0; color: var(--accent); }
.commu-card .commu-info { flex: 1; }
.commu-card .commu-title { font-size: 14px; font-weight: 510; }
.commu-card .commu-desc { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.commu-card .commu-online { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; white-space: nowrap; }
.commu-card .commu-online::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-right: 4px; vertical-align: middle; }

/* ========= sidebar: friends ========= */
.friend-list { list-style: none; }
.friend-list li + li { border-top: 1px solid var(--border); }
.friend-list a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; color: var(--muted); transition: color var(--m-fast) var(--m-ease); }
.friend-list a:hover { color: var(--accent); }
.friend-list .f-desc { font-size: 11px; color: var(--muted2); }

/* ========= sidebar: donate ========= */
.donate-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: center; }
.donate-card .donate-amount { font-family: var(--font-display); font-size: 36px; font-weight: 620; color: var(--accent); line-height: 1.1; }
.donate-card .donate-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.donate-card .donate-bar { margin: 14px 0; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.donate-card .donate-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.donate-card .donate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: var(--accent); color: #fff; border: 0; border-radius: 8px; font-size: 14px; font-weight: 510; cursor: pointer; transition: all var(--m-fast) var(--m-ease); }
.donate-card .donate-btn:hover { background: var(--accent-dim); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > *, .stat-reveal, .search-empty-enter { opacity: 1; transform: none; transition: none; }
  *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ===== AmberPress reference CSS from single.html ===== */

:root {
  --bg:      oklch(95.5% 0.02 75);
  --bg2:     oklch(93% 0.025 75);
  --surface: oklch(100% 0 0);
  --surface-glass: oklch(100% 0 0 / 0.7);
  --fg:      oklch(18% 0.02 75);
  --fg2:     oklch(32% 0.015 75);
  --muted:   oklch(48% 0.014 75);
  --muted2:  oklch(62% 0.01 75);
  --border:  oklch(88% 0.015 75);
  --accent:  oklch(68% 0.20 75);
  --accent-dim: oklch(56% 0.20 75);
  --accent-bg: oklch(70% 0.16 75 / 0.10);
  --code-bg: oklch(16% 0.015 75);
  --code-line: oklch(24% 0.01 75);

  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --container: 1200px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 52px); font-weight: 620; line-height: 1.08; letter-spacing: -0.028em; }
h2 { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); font-weight: 580; line-height: 1.18; letter-spacing: -0.018em; margin-top: 48px; margin-bottom: 16px; }
h3 { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 22px); font-weight: 530; line-height: 1.3; letter-spacing: -0.008em; margin-top: 32px; margin-bottom: 12px; }
h4 { font-family: var(--font-body); font-size: 16px; font-weight: 530; line-height: 1.4; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }
.content-narrow { max-width: 760px; margin: 0 auto; }

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
nav.scrolled { box-shadow: 0 1px 12px rgba(0,0,0,0.04); }
nav .container { display: flex; align-items: center; height: 60px; }
.nav-logo { display: flex; align-items: center; gap: 8px; font-weight: 620; font-size: 18px; letter-spacing: -0.02em; }
.nav-logo svg { flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 510; letter-spacing: 0.02em; color: var(--muted); transition: color 0.2s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transition: transform 0.3s; transform-origin: right; }
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .nav-cta::after { display: none; }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; background: var(--accent); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 510; letter-spacing: 0.02em; transition: background 0.2s, transform 0.2s; }
.nav-cta:hover { background: var(--accent-dim); transform: translateY(-1px); }
.nav-cta svg { transition: transform 0.2s; }
.nav-cta:hover svg { transform: translateX(3px); }
.mobile-toggle { display: none; margin-left: auto; background: none; border: 0; width: 36px; height: 36px; align-items: center; justify-content: center; cursor: pointer; color: var(--fg); border-radius: 8px; }
.mobile-toggle:hover { background: var(--border); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* ===== POST HEADER ===== */
.post-header {
  padding: 130px 0 36px;
  position: relative;
}
.post-header::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 50%; height: 120%;
  background: radial-gradient(ellipse at 30% 40%, oklch(78% 0.10 75 / 0.15), transparent 70%);
  pointer-events: none;
}
.post-header .container { position: relative; }
.breadcrumb { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }
.post-header h1 { margin-bottom: 16px; }

.post-meta-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-top: 20px;
}
.post-meta-bar .author { display: flex; align-items: center; gap: 10px; }
.post-meta-bar .author-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.post-meta-bar .meta-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.post-meta-bar .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.post-tags .tag { padding: 4px 12px; border-radius: 6px; font-size: 12px; font-family: var(--font-mono); font-weight: 510; background: var(--accent-bg); color: var(--accent-dim); border: 1px solid oklch(68% 0.20 75 / 0.12); }

/* ===== ARTICLE LAYOUT (2-COL) ===== */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 28px 0;
  align-items: start;
}
@media (max-width: 1100px) {
  .article-layout { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
}
.article-main { min-width: 0; max-width: 820px; }

/* ===== SIDEBAR ===== */
.article-sidebar { position: sticky; top: 90px; }
@media (max-width: 1100px) { .article-sidebar { display: none; } }
.sb-widget { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.sb-widget-title { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* Sidebar TOC */
.sb-toc { list-style: none; }
.sb-toc li { padding: 4px 0; }
.sb-toc a { font-size: 13px; color: var(--muted); transition: color 0.2s; display: flex; align-items: center; gap: 6px; opacity: 0.55; }
.sb-toc a:hover, .sb-toc a.active { color: var(--accent); opacity: 1; }
.sb-toc .sb-toc-num { font-family: var(--font-mono); font-size: 10px; color: var(--accent); opacity: 0.4; min-width: 18px; }

/* Sidebar Hot posts */
.sb-popular { list-style: none; }
.sb-popular li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.sb-popular li:last-child { border-bottom: 0; }
.sb-popular .pop-num { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--border); width: 24px; flex-shrink: 0; line-height: 1.2; }
.sb-popular .pop-title { font-size: 13px; line-height: 1.4; }
.sb-popular .pop-meta { font-size: 11px; color: var(--muted2); margin-top: 2px; }

/* Sidebar Categories */
.sb-cats { list-style: none; }
.sb-cats li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.sb-cats li:last-child { border-bottom: 0; }
.sb-cats a { color: var(--fg2); transition: color 0.2s; }
.sb-cats a:hover { color: var(--accent); }
.sb-cats .count { font-family: var(--font-mono); font-size: 11px; color: var(--muted2); }

/* Sidebar Tags */
.sb-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-tags a { padding: 3px 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; color: var(--muted); transition: all 0.2s; }
.sb-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* Sidebar GitHub */
.sb-gh-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.sb-gh-item:last-child { border-bottom: 0; }
.sb-gh-item .gh-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--code-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: oklch(78% 0.01 75); font-size: 12px; }
.sb-gh-item .gh-name { font-size: 12px; font-weight: 510; }
.sb-gh-item .gh-meta { font-size: 11px; color: var(--muted2); display: flex; gap: 8px; }
.sb-gh-item .gh-meta span { display: flex; align-items: center; gap: 3px; }

/* Sidebar Donate */
.sb-donate { text-align: center; }
.sb-donate p { font-size: 12px; color: var(--muted); margin: 6px 0 12px; }
.sb-donate .donate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 510; cursor: pointer; transition: background 0.2s; text-decoration: none; }
.sb-donate .donate-btn:hover { background: var(--accent-dim); }

/* ===== ARTICLE BODY CONTENT ===== */
.article-body p, .article-body ul, .article-body ol {
  font-size: 17px; line-height: 1.8; margin-bottom: 20px;
  max-width: 70ch;
}
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body li > ul, .article-body li > ol { margin-top: 8px; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s; }
.article-body a:hover { opacity: 0.7; }

.article-body blockquote {
  margin: 28px 0; padding: 18px 24px;
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
  font-size: 18px; line-height: 1.7; color: var(--muted);
  max-width: 70ch;
}
.article-body blockquote p { margin-bottom: 0; font-size: 18px; }

.article-body pre {
  background: var(--code-bg); border-radius: 12px; padding: 20px;
  margin: 24px 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7;
  color: oklch(78% 0.01 75); position: relative;
}
.article-body pre .copy-btn {
  position: absolute; top: 10px; right: 10px;
  padding: 5px 10px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
  font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
  transition: all 0.2s; opacity: 0;
}
.article-body pre:hover .copy-btn { opacity: 1; }
.article-body pre .copy-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.article-body pre .bar { display: flex; gap: 8px; margin-bottom: 16px; }
.article-body pre .bar span { width: 11px; height: 11px; border-radius: 50%; }
.article-body pre .bar .r { background: #ff5f57; }
.article-body pre .bar .y { background: #ffbd2e; }
.article-body pre .bar .g { background: #28c840; }

.article-body code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--accent-bg); padding: 2px 6px;
  border-radius: 4px; color: var(--accent-dim);
}
.article-body pre code { background: none; padding: 0; border-radius: 0; color: inherit; font-size: 14px; }

.article-body h2:first-child, .article-body h3:first-child { margin-top: 0; }

.hc-kw { color: oklch(72% 0.15 75); }
.hc-fn { color: oklch(78% 0.08 220); }
.hc-str { color: oklch(75% 0.12 145); }
.hc-num { color: oklch(68% 0.14 75); }
.hc-cm { color: oklch(45% 0.02 75); font-style: italic; }
.hc-tag { color: oklch(72% 0.15 35); }

.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0; }

.article-body .callout {
  padding: 18px 22px; border-radius: 10px;
  margin: 24px 0; max-width: 70ch;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
}
.article-body .callout p { margin-bottom: 0; font-size: 15px; }

.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; max-width: 70ch; }
.article-body th, .article-body td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.article-body th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 510; }

/* ===== POST-ARTICLE FULL-WIDTH MODULES ===== */
.post-extras { padding: 0 28px; max-width: var(--container); margin: 0 auto; }

/* Author */
.author-card { display: flex; gap: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 40px 0; align-items: flex-start; }
.author-card .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--accent); flex-shrink: 0; font-family: var(--font-display); }
.author-card .info { flex: 1; }
.author-card .name { font-weight: 620; font-size: 16px; margin-bottom: 4px; }
.author-card .bio { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.author-card .social { display: flex; gap: 10px; }
.author-card .social a { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all 0.2s; }
.author-card .social a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .author-card { flex-direction: column; align-items: center; text-align: center; } }

/* Series */
.series-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 32px 0; }
.series-box .series-label { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.series-box .series-title { font-weight: 530; font-size: 16px; margin-bottom: 12px; }
.series-box .series-progress { display: flex; gap: 4px; margin-bottom: 12px; }
.series-box .series-progress span { width: 28px; height: 4px; border-radius: 2px; background: var(--border); }
.series-box .series-progress span.active { background: var(--accent); }
.series-box .series-progress span.done { background: var(--accent); opacity: 0.4; }
.series-list { list-style: none; }
.series-list li { padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; font-size: 14px; }
.series-list li:last-child { border-bottom: 0; }
.series-list .s-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted2); width: 22px; flex-shrink: 0; }
.series-list .current { color: var(--accent); font-weight: 510; }

/* Snippets */
.snippets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
@media (max-width: 640px) { .snippets-grid { grid-template-columns: 1fr; } }
.snippet-card { background: var(--code-bg); border-radius: 10px; padding: 14px; }
.snippet-card .s-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.snippet-card .s-code { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: oklch(78% 0.01 75); }
.snippet-card .s-code .c { color: oklch(45% 0.02 75); font-style: italic; }
.snippet-card .s-code .k { color: oklch(72% 0.15 75); }
.snippet-card .s-code .s { color: oklch(75% 0.12 145); }
.snippet-card .s-desc { font-size: 11px; color: oklch(55% 0.01 75); margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 6px; }

/* Resources */
.resources { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 28px 0; }
.resources-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .resources-grid { grid-template-columns: 1fr; } }
.resource-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; transition: all 0.2s; }
.resource-item:hover { border-color: var(--accent); }
.resource-item .r-icon { width: 36px; height: 36px; border-radius: 7px; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.resource-item .r-name { font-size: 14px; font-weight: 510; }
.resource-item .r-meta { font-size: 12px; color: var(--muted); }
.resource-item .r-dl { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

/* Feedback */
.post-feedback { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 32px 0; flex-wrap: wrap; }
.post-feedback .fb-label { font-size: 14px; font-weight: 510; color: var(--fg2); }
.post-feedback .fb-actions { display: flex; gap: 8px; }
.fb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: all 0.2s; font-size: 13px; font-family: var(--font-body); }
.fb-btn:hover { border-color: var(--accent); color: var(--accent); }
.fb-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.fb-btn svg { transition: transform 0.2s; }
.fb-btn:hover svg { transform: scale(1.15); }
.fb-rating { display: flex; gap: 3px; }
.fb-rating .star { width: 26px; height: 26px; cursor: pointer; color: var(--border); transition: color 0.2s; }
.fb-rating .star.active { color: var(--accent); }
.fb-rating .star:hover { color: var(--accent); }

/* Share */
.share-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border); margin-top: 14px; }
.share-bar .sh-label { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted2); }
.share-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; transition: all 0.2s; }
.share-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-btn.copied { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

/* Post Nav */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 40px 0; border-top: 1px solid var(--border); margin-top: 0; }
.post-nav a { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: all 0.3s; }
.post-nav a:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
.post-nav .nav-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.post-nav .nav-title { font-size: 15px; font-weight: 510; line-height: 1.4; }
.post-nav .next { text-align: right; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .post-nav .next { text-align: left; } }

/* Comments */
.comments-section { padding: 44px 0 56px; border-top: 1px solid var(--border); }
.comments-section h2 { margin-top: 0; }
.comment-form { margin-top: 28px; }
.comment-form textarea { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; background: var(--surface); color: var(--fg); resize: vertical; min-height: 110px; outline: none; transition: border-color 0.2s; }
.comment-form textarea:focus { border-color: var(--accent); }
.comment-form .form-row { display: flex; gap: 14px; margin-top: 14px; }
.comment-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 15px; background: var(--surface); color: var(--fg); outline: none; transition: border-color 0.2s; }
.comment-form input:focus { border-color: var(--accent); }
.comment-form .btn-submit { margin-top: 14px; padding: 10px 24px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 510; letter-spacing: 0.02em; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.comment-form .btn-submit:hover { background: var(--accent-dim); transform: translateY(-2px); }
@media (max-width: 640px) { .comment-form .form-row { flex-direction: column; } }

.comment-list { margin-top: 24px; }
.comment-item { padding: 18px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; background: var(--surface); }
.comment-item .cm-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comment-item .cm-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 600; font-size: 13px; font-family: var(--font-display); flex-shrink: 0; }
.comment-item .cm-name { font-size: 14px; font-weight: 510; }
.comment-item .cm-time { font-size: 12px; color: var(--muted2); }
.comment-item .cm-body { font-size: 14px; line-height: 1.6; color: var(--fg2); }
.comment-item .cm-actions { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.comment-item .cm-actions span { cursor: pointer; transition: color 0.2s; display: flex; align-items: center; gap: 4px; }
.comment-item .cm-actions span:hover { color: var(--accent); }
.comment-item .cm-actions .liked { color: var(--accent); }
.comment-item.reply { margin-left: 36px; }
@media (max-width: 640px) { .comment-item.reply { margin-left: 18px; } }

/* Related */
.related-section { padding: 44px 0; border-top: 1px solid var(--border); }
.related-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 24px; }
@media (max-width: 960px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; } }
.related-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.3s; background: var(--surface); }
.related-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.04); }
.related-card .r-thumb { height: 130px; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--muted2); font-size: 30px; }
.related-card .r-body { padding: 14px; }
.related-card .r-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.related-card .r-title { font-size: 15px; font-weight: 530; line-height: 1.4; margin-bottom: 6px; }
.related-card .r-meta { font-size: 12px; color: var(--muted); }

/* Newsletter */
.newsletter-box { background: var(--accent-bg); border: 1px solid oklch(68% 0.20 75 / 0.15); border-radius: 12px; padding: 28px; margin: 36px 0; text-align: center; }
.newsletter-box h3 { margin-top: 0; margin-bottom: 6px; }
.newsletter-box p { font-size: 14px; color: var(--muted); margin-bottom: 16px; max-width: 460px; margin-left: auto; margin-right: auto; }
.nl-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.nl-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 15px; background: var(--surface); color: var(--fg); outline: none; }
.nl-form input:focus { border-color: var(--accent); }
.nl-form button { padding: 10px 22px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 510; letter-spacing: 0.02em; cursor: pointer; transition: background 0.2s, transform 0.2s; white-space: nowrap; }
.nl-form button:hover { background: var(--accent-dim); transform: translateY(-1px); }
@media (max-width: 640px) { .nl-form { flex-direction: column; } }

/* Footer */
footer { padding: 44px 0; border-top: 1px solid var(--border); }
footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 10px; max-width: 36ch; }
footer h5 { font-size: 12px; font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); margin-bottom: 14px; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 8px; }
footer ul a { font-size: 14px; color: var(--muted); transition: color 0.2s; }
footer ul a:hover { color: var(--accent); }
.footer-bottom { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { footer .container { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { footer .container { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; gap: 8px; } }

/* Responsive Nav */
@media (max-width: 720px) {
  .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 16px 24px; gap: 16px; flex-direction: column; }
  .nav-links.open { display: flex; }
  .mobile-toggle { display: flex; }
  .nav-links .nav-cta { align-self: flex-start; }
  .post-meta-bar .post-tags { margin-left: 0; width: 100%; }
}

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.vis { opacity: 1; transform: translateY(0); }

@keyframes pulse-dot { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* WordPress theme compatibility for AmberPress style */
.admin-bar nav{top:32px}.wp-custom-logo .nav-logo img{max-height:28px;width:auto}.nav-links .menu-item{list-style:none}.article-body .wp-caption{max-width:100%}.article-body img{border-radius:12px}.amber-wp-hidden{display:none}.site-footer{background:var(--surface);border-top:1px solid var(--border)}

/* ===== CodeAI x AmberPress WP compatibility final tweaks ===== */
body{background:var(--bg)!important;color:var(--fg)!important}.site-header{all:unset}#content{display:block}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.terminal{background:var(--code-bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(50,35,15,.12)}.terminal-bar{height:42px;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--code-line);border-bottom:1px solid rgba(255,255,255,.06)}.terminal-title{margin-left:8px;color:var(--muted2);font-size:12px}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.red{background:#ff5f57}.dot.yellow{background:#ffbd2e}.dot.green{background:#28c840}.terminal pre{padding:28px;margin:0;overflow:auto;font-family:var(--font-mono);font-size:14px;line-height:1.7;color:#e5e7eb}.tk-kw{color:#f59e0b}.tk-fn{color:#fbbf24}.tk-str{color:#a7f3d0}.quote-section{padding:70px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2)}.quote-text{font-size:clamp(28px,4vw,44px);line-height:1.18;letter-spacing:-.025em;text-align:center;color:var(--fg)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden}.stat-item{background:var(--surface);padding:32px;text-align:center}.stat-num{font-size:34px;color:var(--accent);font-weight:650}.stat-label{color:var(--muted);font-size:14px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:32px}.section-label{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}.section-desc{max-width:640px}.features-grid,.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card,.blog-card,.post-card,.sidebar-section,.archive-stat,.entry-item,.sb-widget,.author-card,.resources-section,.share-section{background:var(--surface);border:1px solid var(--border);border-radius:16px}.feature-card{padding:26px}.feature-icon{width:42px;height:42px;border-radius:10px;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;margin-bottom:18px;font-family:var(--font-mono)}.blog-card{overflow:hidden}.blog-card-img,.post-card-thumb{background:var(--bg2);display:grid;place-items:center;color:var(--muted);min-height:180px}.blog-card-img span{color:var(--muted)}.blog-card-body{padding:22px}.blog-card-meta,.post-card-meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:10px}.blog-card-link,.post-card-read,.section-link{color:var(--accent);font-weight:520}.cta-section{padding:80px 0}.cta-box{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:38px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}.page-header{padding:120px 0 48px}.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:18px}.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:34px;margin:30px 0 80px}.blog-main{display:grid;gap:18px}.post-card{display:grid;grid-template-columns:240px 1fr;overflow:hidden}.post-card-body{padding:24px}.post-card-excerpt{color:var(--muted);margin:10px 0 18px}.post-card-footer{display:flex;justify-content:space-between;gap:12px;align-items:center}.tag{display:inline-flex;padding:4px 9px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;margin:2px}.sep{width:3px;height:3px;border-radius:50%;background:var(--muted2)}.sidebar{display:grid;gap:16px;align-content:start}.sidebar-section{padding:20px}.sidebar-section ul{list-style:none;display:grid;gap:8px}.sidebar-section a{color:var(--muted)}.archive-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.archive-stat{padding:20px}.archive-stat .num{display:block;font-size:28px;color:var(--accent)}.archive-layout{display:grid;grid-template-columns:1fr 320px;gap:34px;margin:30px 0 80px}.entry-item{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:18px;margin-bottom:12px}.entry-date{text-align:center;border-right:1px solid var(--border)}.entry-date .day{display:block;font-size:28px;color:var(--accent)}.entry-date .mon{font-size:12px;color:var(--muted);text-transform:uppercase}.entry-meta{display:flex;gap:12px;color:var(--muted);font-size:14px}.article-layout{max-width:1200px;margin:0 auto 80px;padding:0 28px;display:grid;grid-template-columns:minmax(0,760px) 300px;gap:54px}.article-main{min-width:0}.article-body{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:42px}.article-body p,.article-body li{color:var(--fg2);font-size:17px;line-height:1.85;margin-bottom:18px}.article-body h2{margin-top:44px}.article-body pre{background:var(--code-bg);color:#e5e7eb;border-radius:14px;padding:22px;overflow:auto;margin:24px 0}.post-header{padding:130px 0 36px}.post-meta-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}.author{display:flex;gap:9px;align-items:center}.author-avatar,.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:white}.post-tags{display:flex;gap:4px;flex-wrap:wrap}.article-sidebar{position:sticky;top:86px;align-self:start;display:grid;gap:16px}.sb-widget{padding:18px}.sb-widget-title{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.auto-toc-list{display:grid;gap:8px}.auto-toc-list a{font-size:14px;color:var(--muted)}.auto-toc-list .toc-sub{padding-left:12px}.sb-pop-item{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}.pop-num{color:var(--accent)}.pop-title{font-size:14px;color:var(--fg2)}.author-card,.resources-section,.share-section{padding:24px;margin-top:18px}.author-card{display:flex;gap:16px}.resources-grid{display:grid;gap:10px;margin-top:14px}.resource-item{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px}.r-icon{width:32px;height:32px;border-radius:8px;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;font-size:12px}.r-dl{color:var(--accent)}.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.post-nav>div{padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.nav-label{display:block;color:var(--muted);font-size:12px}.nav-title{font-weight:520}.search-form{display:flex;gap:8px}.search-field{flex:1;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.search-submit{padding:12px 18px;border:0;border-radius:10px;background:var(--accent);color:white}.copy-code-button{position:absolute;right:10px;top:10px}.content-meta-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.content-meta-strip span{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:5px 10px}footer{padding:50px 0;background:var(--surface);border-top:1px solid var(--border)}.footer-brand{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.footer-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;border-top:1px solid var(--border);padding-top:18px}@media(max-width:900px){.hero-grid,.features-grid,.blog-grid,.blog-layout,.archive-layout,.article-layout{grid-template-columns:1fr}.article-sidebar{position:static}.post-card{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.nav-links{display:none;position:absolute;top:60px;left:20px;right:20px;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}.nav-links.open,.nav-links.is-open{display:flex}.mobile-toggle{display:flex}.footer-brand,.footer-bottom{flex-direction:column;align-items:flex-start}}@media(max-width:560px){.stats-grid{grid-template-columns:1fr}.article-body{padding:26px}.post-nav{grid-template-columns:1fr}}
.reveal,.reveal-scale,.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}.reveal-scale{transform:scale(.98) translateY(14px)}.reveal.visible,.reveal-scale.visible,.stagger>*.visible{opacity:1;transform:none}.accent-word,.accent-word-glow{color:var(--accent)}.hero-glow,.page-glow{position:absolute;inset:auto 10% 0 auto;width:420px;height:420px;border-radius:50%;background:var(--accent-bg);filter:blur(80px);pointer-events:none}.blog-card-img img,.post-card-thumb img{width:100%;height:100%;object-fit:cover}.pagination{margin:26px 0}.pagination .nav-links{display:flex;position:static;background:transparent;border:0;padding:0;gap:8px}.page-numbers{display:inline-flex;padding:8px 12px;border:1px solid var(--border);border-radius:8px;color:var(--muted)}.page-numbers.current{background:var(--accent);color:white;border-color:var(--accent)}

/* User adjustment: features section uses 2 cards per row for calmer layout */
.features-section .features-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
  margin: 0 auto;
}
.features-section .section-head {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .features-section .features-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* User adjustment: latest programming articles as polished 4-column grid */
.blog-preview .blog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.blog-preview .blog-card {
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-preview .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(90, 58, 20, .10);
  border-color: color-mix(in oklch, var(--accent) 35%, var(--border));
}
.blog-preview .blog-card-img {
  min-height: 132px;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 28% 20%, var(--accent-bg), transparent 45%),
    linear-gradient(135deg, var(--bg2), var(--surface));
  border-bottom: 1px solid var(--border);
}
.blog-preview .blog-card-img .mono,
.blog-preview .blog-card-img span {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-glass);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .08em;
}
.blog-preview .blog-card-body {
  padding: 18px;
}
.blog-preview .blog-card-meta {
  font-size: 12px;
  margin-bottom: 9px;
  justify-content: space-between;
}
.blog-preview .blog-card h3 {
  font-size: 18px;
  line-height: 1.32;
  margin-bottom: 9px;
}
.blog-preview .blog-card p {
  font-size: 14px;
  line-height: 1.58;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 66px;
}
.blog-preview .blog-card-link {
  display: inline-flex;
  margin-top: 14px;
  font-size: 14px;
}
@media (max-width: 1100px) {
  .blog-preview .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .blog-preview .blog-grid { grid-template-columns: 1fr; }
}

/* User adjustment: richer dark amber footer */
.amber-footer {
  position: relative;
  overflow: hidden;
  padding: 64px 0 28px;
  background:
    radial-gradient(circle at 12% 0%, oklch(68% 0.20 75 / .20), transparent 34%),
    radial-gradient(circle at 88% 18%, oklch(56% 0.18 65 / .16), transparent 30%),
    linear-gradient(180deg, oklch(20% 0.035 70), oklch(15% 0.028 70));
  color: oklch(92% 0.018 75);
  border-top: 1px solid oklch(42% 0.06 75 / .55);
}
.amber-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.018) 2px, rgba(255,255,255,.018) 4px),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%);
}
.amber-footer .container { position: relative; z-index: 1; }
.amber-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 28px;
  align-items: stretch;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.amber-footer .nav-logo { color: #fff; }
.amber-footer .nav-logo svg { filter: drop-shadow(0 0 12px oklch(68% 0.20 75 / .35)); }
.amber-footer-brand {
  display: block;
  margin: 0;
}
.amber-footer-brand p {
  max-width: 680px;
  margin: 16px 0 0;
  color: oklch(78% 0.025 75);
  line-height: 1.75;
}
.footer-tech-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.footer-tech-tags span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: oklch(86% 0.045 75);
  font-size: 12px;
  font-family: var(--font-mono);
}
.footer-newsletter-card {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
}
.footer-newsletter-card h3 {
  color: #fff;
  margin: 8px 0 8px;
}
.footer-newsletter-card p {
  color: oklch(76% 0.025 75);
  margin: 0 0 18px;
}
.footer-newsletter {
  display: flex;
  gap: 10px;
}
.footer-newsletter input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: #fff;
  padding: 0 13px;
  outline: none;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,.44); }
.footer-newsletter button {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  color: oklch(17% 0.025 70);
  background: var(--accent);
  font-weight: 650;
  cursor: pointer;
}
.amber-footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  padding: 34px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.amber-footer h5 {
  color: #fff;
  font-size: 14px;
  font-weight: 620;
  margin: 0 0 14px;
  letter-spacing: .02em;
}
.amber-footer ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
}
.amber-footer li a {
  color: oklch(72% 0.025 75);
  font-size: 14px;
  transition: color .2s, transform .2s;
}
.amber-footer li a:hover {
  color: var(--accent);
  transform: translateX(2px);
}
.footer-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.12);
}
.footer-metrics-row div {
  padding: 20px;
  background: rgba(255,255,255,.045);
  text-align: center;
}
.footer-metrics-row strong {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 24px;
}
.footer-metrics-row span {
  display: block;
  margin-top: 3px;
  color: oklch(72% 0.025 75);
  font-size: 13px;
}
.amber-footer-bottom {
  border-top: 0;
  padding-top: 0;
  color: oklch(66% 0.02 75);
}
@media (max-width: 980px) {
  .amber-footer-top,
  .amber-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-newsletter-card { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .amber-footer { padding-top: 46px; }
  .amber-footer-top,
  .amber-footer-grid,
  .footer-metrics-row {
    grid-template-columns: 1fr;
  }
  .footer-newsletter { flex-direction: column; }
}

/* User adjustment: richer homepage content sections in AmberPress style */
.amber-hub-section,.tools-spotlight-section,.learning-roadmap-section,.opensource-lab-section,.resources-community-section{padding:82px 0;border-top:1px solid var(--border)}
.amber-hub-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px}.hub-card,.tool-stack-card,.roadmap-step,.oss-card,.resource-panel,.community-panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px}.hub-card.large{grid-row:span 2;background:linear-gradient(180deg,var(--surface),var(--bg2))}.hub-kicker{display:block;color:var(--accent);font-size:12px;margin-bottom:28px}.hub-card h3,.tool-stack-card h3,.roadmap-step h3,.oss-card h3{margin-bottom:10px}.hub-card p,.tool-stack-card p,.roadmap-step p,.oss-card p{color:var(--muted)}.hub-tags,.oss-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.hub-tags span,.oss-meta span{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:5px 9px;background:var(--surface-glass)}.tool-stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tool-stack-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-family:var(--font-mono);margin-bottom:18px}.tool-stack-card ul{margin:16px 0 0;padding-left:18px;color:var(--muted);font-size:14px}.roadmap-board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.roadmap-step{position:relative}.roadmap-step span{display:inline-flex;color:var(--accent);font-size:12px;margin-bottom:18px}.roadmap-step::before{content:'';position:absolute;top:0;left:24px;right:24px;height:2px;background:var(--accent);opacity:.28}.oss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.oss-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.oss-head span{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--code-bg);color:var(--accent);font-size:12px}.oss-head strong{font-family:var(--font-mono);font-size:15px}.resources-community-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.resource-list-amber,.pulse-list-amber{display:grid;gap:12px;margin-top:20px}.resource-list-amber a,.pulse-list-amber div{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:start;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg2)}.resource-list-amber span,.pulse-list-amber time{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-family:var(--font-mono);font-size:12px}.resource-list-amber p,.pulse-list-amber p{color:var(--muted);margin:4px 0 0;font-size:14px}@media(max-width:1080px){.amber-hub-grid,.tool-stack-grid,.oss-grid,.resources-community-grid{grid-template-columns:1fr 1fr}.roadmap-board{grid-template-columns:1fr 1fr}.hub-card.large{grid-row:auto}}@media(max-width:680px){.amber-hub-grid,.tool-stack-grid,.oss-grid,.resources-community-grid,.roadmap-board{grid-template-columns:1fr}.amber-hub-section,.tools-spotlight-section,.learning-roadmap-section,.opensource-lab-section,.resources-community-section{padding:58px 0}}

/* User adjustment: homepage card modules use strict 2-column balanced rows */
.features-section .features-grid,
.blog-preview .blog-grid,
.amber-hub-grid,
.tool-stack-grid,
.roadmap-board,
.oss-grid,
.resources-community-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.hub-card.large {
  grid-row: auto !important;
}
.auto-fill-card {
  position: relative;
  background:
    radial-gradient(circle at 20% 0%, var(--accent-bg), transparent 42%),
    var(--surface) !important;
}
@media (max-width: 720px) {
  .features-section .features-grid,
  .blog-preview .blog-grid,
  .amber-hub-grid,
  .tool-stack-grid,
  .roadmap-board,
  .oss-grid,
  .resources-community-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Redesigned archive/category page */
.amber-archive-hero{position:relative;overflow:hidden;padding:118px 0 42px;background:linear-gradient(180deg,var(--bg),var(--bg2));border-bottom:1px solid var(--border)}
.archive-hero-grid{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:end}.archive-hero-card{padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 18px 50px rgba(90,58,20,.07)}.archive-hero-card>.mono{color:var(--accent);font-size:12px;margin-bottom:18px}.archive-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}.archive-mini-stats span{display:grid;place-items:center;background:var(--bg);padding:14px 8px;color:var(--muted);font-size:12px}.archive-mini-stats strong{display:block;color:var(--fg);font-size:24px}.archive-search-panel{margin-top:30px;padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface-glass);backdrop-filter:blur(16px)}.archive-search-panel .search-form{margin-bottom:12px}.archive-search-panel .search-field{height:46px}.archive-search-panel .search-submit{height:46px}.archive-filter-pills{display:flex;gap:8px;flex-wrap:wrap}.archive-filter-pills a{padding:7px 11px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:13px}.archive-filter-pills a.active,.archive-filter-pills a:hover{background:var(--accent);border-color:var(--accent);color:white}.amber-archive-content{padding:44px 0 86px}.archive-feature-strip{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:14px;margin-bottom:24px}.archive-feature-card,.archive-channel-card,.archive-side-card,.amber-entry-card{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 14px 42px rgba(90,58,20,.055)}.archive-feature-card{padding:28px;background:linear-gradient(180deg,var(--surface),var(--bg2))}.archive-feature-card p,.archive-channel-card p{color:var(--muted)}.archive-channel-card{padding:22px}.archive-channel-card span{display:inline-grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--code-bg);color:var(--accent);font-size:12px;margin-bottom:18px}.archive-channel-card strong{display:block;margin-bottom:8px}.archive-page-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px}.archive-feed-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:16px}.archive-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.amber-entry-card{overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}.amber-entry-card:hover{transform:translateY(-3px);box-shadow:0 20px 55px rgba(90,58,20,.09)}.amber-entry-thumb{min-height:150px;aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,var(--accent-bg),transparent 40%),var(--bg2);border-bottom:1px solid var(--border);color:var(--accent)}.amber-entry-thumb img{width:100%;height:100%;object-fit:cover}.amber-entry-body{padding:18px}.amber-entry-body h3{font-size:20px;margin-bottom:9px}.amber-entry-body p{color:var(--muted);font-size:14px;line-height:1.62;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:68px}.amber-entry-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.amber-entry-footer span{color:var(--muted);font-size:12px}.amber-entry-footer a{color:var(--accent);font-weight:520}.amber-archive-sidebar{display:grid;gap:16px;align-content:start;position:sticky;top:84px}.archive-side-card{padding:20px}.archive-side-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}.archive-side-card li{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:8px;color:var(--muted)}.archive-side-card li a{color:var(--fg2)}.archive-popular-item{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.archive-popular-item span{color:var(--accent)}.archive-popular-item strong{font-size:14px;line-height:1.45;color:var(--fg2)}.amber-resource-side{background:linear-gradient(180deg,var(--surface),var(--bg2))}.amber-resource-side a{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);color:var(--fg2)}.amber-resource-side a span{display:grid;place-items:center;height:32px;border-radius:8px;background:var(--accent-bg);color:var(--accent);font-family:var(--font-mono);font-size:11px}.archive-empty{grid-column:1/-1;padding:40px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}@media(max-width:980px){.archive-hero-grid,.archive-feature-strip,.archive-page-layout{grid-template-columns:1fr}.amber-archive-sidebar{position:static}.archive-card-grid{grid-template-columns:1fr 1fr}}@media(max-width:680px){.amber-archive-hero{padding-top:96px}.archive-card-grid,.archive-mini-stats{grid-template-columns:1fr}.archive-feed-head{align-items:flex-start;flex-direction:column}}

/* More rich modules for category/archive page */
.archive-rich-modules{margin:26px 0}.archive-module-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:16px}.archive-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.catalog-card,.archive-timeline-panel,.archive-tag-cloud-panel{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 14px 42px rgba(90,58,20,.055)}.catalog-card{padding:22px}.catalog-card>.mono{display:inline-flex;color:var(--accent);font-size:12px;margin-bottom:22px}.catalog-card p,.catalog-card li{color:var(--muted)}.catalog-card ol{margin:14px 0 0;padding-left:18px}.catalog-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.catalog-links a,.catalog-cta{display:inline-flex;padding:9px 11px;border:1px solid var(--border);border-radius:10px;color:var(--fg2);background:var(--bg2);font-size:14px}.catalog-links a:hover,.catalog-cta:hover{color:white;background:var(--accent);border-color:var(--accent)}.tool-mini-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.tool-mini-list span{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);color:var(--muted);font-size:12px;font-family:var(--font-mono)}.catalog-cta{margin-top:16px;color:var(--accent)}.archive-timeline-panel{padding:24px;margin-bottom:18px}.timeline-grid-amber{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.timeline-grid-amber div{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg2)}.timeline-grid-amber span{display:inline-flex;color:var(--accent);font-family:var(--font-mono);font-size:12px;margin-bottom:14px}.timeline-grid-amber strong{display:block;margin-bottom:6px}.timeline-grid-amber p{color:var(--muted);font-size:14px;margin:0}.archive-tag-cloud-panel{padding:24px;display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start;margin-bottom:28px}.tagcloud-amber{display:flex;gap:9px;flex-wrap:wrap}.tagcloud-amber a{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:var(--bg2);font-size:13px}.tagcloud-amber a:hover{background:var(--accent);border-color:var(--accent);color:white}@media(max-width:980px){.archive-catalog-grid,.timeline-grid-amber,.archive-tag-cloud-panel{grid-template-columns:1fr 1fr}}@media(max-width:680px){.archive-module-head{align-items:flex-start;flex-direction:column}.archive-catalog-grid,.timeline-grid-amber,.archive-tag-cloud-panel,.catalog-links{grid-template-columns:1fr}}

/* Even richer archive/category channel modules */
.archive-extra-depth{margin:28px 0}.editor-picks-grid,.code-snippet-grid,.book-contributor-grid,.archive-insight-grid,.archive-faq-newsletter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.editor-pick-card,.snippet-card-amber,.book-panel-amber,.contributor-panel-amber,.insight-card-amber,.archive-faq-panel,.archive-newsletter-panel{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 14px 42px rgba(90,58,20,.055);padding:22px}.editor-pick-card{background:linear-gradient(180deg,var(--surface),var(--bg2))}.pick-badge{display:inline-flex;color:var(--accent);font-size:12px;margin-bottom:26px}.editor-pick-card p,.snippet-card-amber p,.insight-card-amber p,.archive-newsletter-panel p,.archive-faq-panel p{color:var(--muted)}.editor-pick-card a{display:inline-flex;margin-top:14px;color:var(--accent);font-weight:520}.snippet-card-amber{padding:0;overflow:hidden}.snippet-head{display:flex;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);align-items:center}.snippet-head span{color:var(--accent);font-size:12px}.snippet-card-amber pre{margin:0;background:var(--code-bg);color:#e5e7eb;padding:18px;overflow:auto;font-family:var(--font-mono);font-size:13px;line-height:1.6}.snippet-card-amber p{padding:14px 18px;margin:0}.book-list-amber,.contributor-list-amber{display:grid;gap:10px;margin-top:16px}.book-list-amber div,.contributor-list-amber div{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg2)}.book-list-amber span,.contributor-list-amber span{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-family:var(--font-mono);font-size:12px}.book-list-amber strong,.contributor-list-amber strong{font-size:14px}.book-list-amber em,.contributor-list-amber em{font-style:normal;color:var(--muted);font-size:12px;grid-column:2}.insight-card-amber span{display:inline-flex;color:var(--accent);font-size:34px;margin-bottom:12px}.archive-faq-panel details{background:var(--bg2);box-shadow:none;margin-top:10px}.archive-faq-panel summary{font-size:15px}.archive-newsletter-panel{background:linear-gradient(180deg,var(--surface),var(--bg2))}.archive-newsletter-form{display:flex;gap:10px;margin:18px 0 10px}.archive-newsletter-form input{flex:1;min-width:0;height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:0 12px}.archive-newsletter-form button{height:44px;border:0;border-radius:10px;background:var(--accent);color:white;padding:0 18px;font-weight:620}.archive-newsletter-panel small{color:var(--muted2)}@media(max-width:760px){.editor-picks-grid,.code-snippet-grid,.book-contributor-grid,.archive-insight-grid,.archive-faq-newsletter-grid{grid-template-columns:1fr}.archive-newsletter-form{flex-direction:column}}

/* Redesigned single post content page */
.amber-single-hero{position:relative;padding:126px 0 42px;background:linear-gradient(180deg,var(--bg),var(--bg2));border-bottom:1px solid var(--border);text-align:center}.amber-single-hero .breadcrumb{text-align:center}.single-category-pill{display:inline-flex;margin:0 auto 18px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font-family:var(--font-mono);font-size:12px}.amber-single-hero h1{max-width:880px;margin:0 auto}.single-excerpt{max-width:760px;margin:20px auto 0;color:var(--muted);font-size:18px;line-height:1.7}.single-meta-line{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px;color:var(--muted);font-size:14px}.single-meta-line>span,.single-author-mini{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-glass)}.single-hero-tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:18px}.single-cover-wrap{padding:26px 0 10px;background:var(--bg2)}.single-cover-card{border:1px solid var(--border);border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 24px 80px rgba(90,58,20,.10)}.single-cover-card img{width:100%;max-height:430px;object-fit:cover}.single-code-cover{background:var(--code-bg)}.single-code-cover pre{margin:0;padding:30px;overflow:auto;color:#e5e7eb;font-family:var(--font-mono);line-height:1.7}.amber-single-layout{display:grid;grid-template-columns:minmax(0,820px) 300px;gap:34px;align-items:start;padding-top:34px;padding-bottom:86px}.amber-single-main{display:grid;gap:18px}.article-paper{border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 18px 60px rgba(90,58,20,.07);overflow:hidden}.article-intro-card{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding:28px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface),var(--bg2))}.article-intro-card h2{margin:6px 0 8px}.article-intro-card p,.article-intro-card li{color:var(--muted)}.article-intro-card ul{margin:0;padding-left:18px}.article-paper .content-meta-strip{padding:22px 28px 0;margin:0}.article-paper .article-body{border:0;border-radius:0;background:transparent;padding:28px 42px 46px}.article-paper .article-body>p:first-child{font-size:19px;line-height:1.85;color:var(--fg2)}.article-paper .article-body h2{position:relative;padding-top:8px}.article-paper .article-body h2::before{content:'';position:absolute;top:0;left:0;width:42px;height:3px;border-radius:999px;background:var(--accent)}.article-paper .article-body blockquote{margin:28px 0;padding:18px 22px;border-left:3px solid var(--accent);background:var(--accent-bg);border-radius:0 14px 14px 0;color:var(--fg2)}.single-resource-band,.single-author-box,.single-cta-panel,.single-related,.codeaihub-comments{border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 14px 42px rgba(90,58,20,.055);padding:26px}.single-resource-band{display:flex;justify-content:space-between;gap:24px;align-items:center;background:linear-gradient(180deg,var(--surface),var(--bg2))}.single-resource-band p,.single-cta-panel p,.single-author-box p{color:var(--muted)}.resource-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.resource-chip-row span{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px}.single-author-box{display:grid;grid-template-columns:58px 1fr;gap:16px}.single-author-box .avatar{width:58px;height:58px}.single-cta-panel{display:flex;justify-content:space-between;gap:22px;align-items:center;background:linear-gradient(180deg,var(--surface),var(--bg2))}.single-post-navigation{display:grid;grid-template-columns:1fr 1fr;gap:14px}.nav-card{display:block;border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:18px}.nav-card span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.nav-card strong{font-weight:560}.related-amber-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.related-amber-card{display:block;border:1px solid var(--border);border-radius:16px;background:var(--bg2);padding:18px}.related-amber-card span{color:var(--accent);font-size:12px}.related-amber-card h3{margin:14px 0 8px}.related-amber-card p{color:var(--muted);font-size:14px}.amber-single-sidebar{position:sticky;top:84px;display:grid;gap:16px}.single-side-widget{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 14px 42px rgba(90,58,20,.055);padding:18px}.side-info-list{display:grid;gap:8px;color:var(--muted);font-size:14px}.side-download{background:linear-gradient(180deg,var(--surface),var(--bg2))}.side-download p{color:var(--muted);font-size:14px}.toc-widget .auto-toc-list a{display:block;padding:7px 0;border-bottom:1px solid var(--border);color:var(--muted);font-size:14px}.toc-widget .auto-toc-list a:hover{color:var(--accent)}.toc-widget .auto-toc-list .toc-sub{padding-left:14px;font-size:13px}.codeaihub-comments{margin:0}@media(max-width:980px){.amber-single-layout{grid-template-columns:1fr}.amber-single-sidebar{position:static;grid-template-columns:1fr 1fr}.article-intro-card{grid-template-columns:1fr}.single-resource-band,.single-cta-panel{align-items:flex-start;flex-direction:column}}@media(max-width:680px){.amber-single-hero{text-align:left}.amber-single-hero .breadcrumb{text-align:left}.single-meta-line,.single-hero-tags{justify-content:flex-start}.amber-single-sidebar,.related-amber-grid,.single-post-navigation{grid-template-columns:1fr}.article-paper .article-body{padding:24px}.single-cover-card{border-radius:16px}.article-intro-card{padding:22px}}

/* User adjustment: single page left TOC + post navigation only at bottom */
.amber-single-layout-left-toc {
  grid-template-columns: 230px minmax(0, 760px) 280px;
  gap: 26px;
  max-width: 1280px;
}
.amber-toc-sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
  display: grid;
  gap: 16px;
}
.amber-toc-sidebar .toc-widget {
  background: linear-gradient(180deg, var(--surface), var(--bg2));
}
.amber-single-info-sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
}
.article-content h2,
.article-content h3,
.article-body h2,
.article-body h3 {
  scroll-margin-top: 92px;
}
.single-post-navigation-bottom {
  margin-top: 0;
  margin-bottom: 0;
}
.single-post-navigation-bottom .nav-card {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1180px) {
  .amber-single-layout-left-toc {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .amber-toc-sidebar {
    grid-column: 1 / -1;
    position: static;
  }
  .amber-toc-sidebar .toc-widget .auto-toc-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .amber-toc-sidebar .toc-widget .auto-toc-list a {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--bg2);
  }
}
@media (max-width: 980px) {
  .amber-single-layout-left-toc {
    grid-template-columns: 1fr;
  }
  .amber-single-info-sidebar {
    position: static;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px) {
  .amber-single-info-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Fix: article TOC should be normal horizontal text, not vertical-looking */
.amber-single-layout-left-toc {
  grid-template-columns: 270px minmax(0, 760px) 280px;
}
.amber-toc-sidebar .single-side-widget {
  padding: 18px 16px;
}
.amber-toc-sidebar .auto-toc-list {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.amber-toc-sidebar .auto-toc-list a,
.toc-widget .auto-toc-list a {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  display: block !important;
  width: 100%;
  line-height: 1.45;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
}
.amber-toc-sidebar .auto-toc-list a:hover,
.toc-widget .auto-toc-list a:hover {
  color: var(--accent);
  background: var(--accent-bg);
}
.amber-toc-sidebar .auto-toc-list .toc-sub,
.toc-widget .auto-toc-list .toc-sub {
  padding-left: 22px !important;
  font-size: 13px;
  color: var(--muted2);
}
@media (max-width: 1180px) {
  .amber-toc-sidebar .toc-widget .auto-toc-list a {
    width: auto;
    white-space: nowrap !important;
  }
}
@media (max-width: 680px) {
  .amber-toc-sidebar .toc-widget .auto-toc-list a {
    white-space: normal !important;
  }
}

/* User adjustment: previous/next navigation directly after article content */
.article-paper + .single-post-navigation-bottom {
  margin-top: 0;
}
.single-post-navigation-bottom + .single-resource-band {
  margin-top: 0;
}

/* Full single post relayout: clean left TOC + main reading column */
.post-redesign-hero{padding:124px 0 44px;background:linear-gradient(180deg,var(--bg),var(--bg2));border-bottom:1px solid var(--border)}
.post-redesign-head{max-width:920px;text-align:center}.post-redesign-cat{display:inline-flex;margin:16px 0;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font-family:var(--font-mono);font-size:12px}.post-redesign-head h1{max-width:900px;margin:0 auto}.post-redesign-head>p{max-width:760px;margin:20px auto 0;color:var(--muted);font-size:18px;line-height:1.72}.post-redesign-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}.post-redesign-meta span{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-glass);color:var(--muted);font-size:14px}.post-redesign-cover-section{padding:28px 0 10px;background:var(--bg2)}.post-redesign-cover{border:1px solid var(--border);border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 24px 80px rgba(90,58,20,.10)}.post-redesign-cover img{width:100%;max-height:420px;object-fit:cover}.post-redesign-code-cover{background:var(--code-bg)}.post-redesign-code-cover pre{margin:0;padding:32px;color:#e5e7eb;overflow:auto;font-family:var(--font-mono);line-height:1.7}.post-redesign-body-section{padding:34px 0 90px}.post-redesign-layout{display:grid;grid-template-columns:260px minmax(0,820px);gap:34px;align-items:start;max-width:1160px}.post-redesign-toc{position:sticky;top:84px}.toc-card-new{border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--bg2));box-shadow:0 14px 42px rgba(90,58,20,.055);padding:18px}.toc-card-new .auto-toc-list{display:grid;gap:4px}.toc-card-new .auto-toc-list a{display:block!important;writing-mode:horizontal-tb!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:break-word!important;padding:8px 10px!important;border:0!important;border-radius:10px;color:var(--muted);font-size:14px;line-height:1.45}.toc-card-new .auto-toc-list a:hover{background:var(--accent-bg);color:var(--accent)}.toc-card-new .auto-toc-list .toc-sub{padding-left:22px!important;color:var(--muted2);font-size:13px}.post-redesign-main{display:grid;gap:18px}.post-redesign-paper,.post-redesign-resource,.post-redesign-author,.post-redesign-cta,.post-redesign-related{border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 18px 60px rgba(90,58,20,.07);overflow:hidden}.post-redesign-summary{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding:28px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface),var(--bg2))}.post-redesign-summary h2{margin:6px 0 8px}.post-redesign-summary p,.post-redesign-summary li{color:var(--muted)}.post-redesign-summary ul{margin:0;padding-left:18px}.post-redesign-paper .content-meta-strip{padding:22px 34px 0;margin:0}.post-redesign-content{padding:28px 44px 48px}.post-redesign-content p,.post-redesign-content li{font-size:17px;line-height:1.86;color:var(--fg2)}.post-redesign-content>p:first-child{font-size:19px;color:var(--fg2)}.post-redesign-content h2{position:relative;padding-top:10px;scroll-margin-top:92px}.post-redesign-content h3{scroll-margin-top:92px}.post-redesign-content h2::before{content:'';position:absolute;top:0;left:0;width:42px;height:3px;border-radius:999px;background:var(--accent)}.post-redesign-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px}.post-redesign-nav .nav-card{min-height:96px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:18px;box-shadow:0 14px 42px rgba(90,58,20,.045)}.post-redesign-nav .nav-card span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.post-redesign-nav .nav-card a{color:var(--fg)}.post-redesign-resource{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px;background:linear-gradient(180deg,var(--surface),var(--bg2))}.post-redesign-resource p,.post-redesign-author p,.post-redesign-cta p{color:var(--muted)}.post-redesign-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.post-redesign-author,.post-redesign-cta{padding:24px}.post-redesign-author{display:grid;grid-template-columns:58px 1fr;gap:16px}.post-redesign-author .avatar{width:58px;height:58px}.post-redesign-cta{background:linear-gradient(180deg,var(--surface),var(--bg2))}.post-redesign-cta .btn{margin-top:12px}.post-redesign-related{padding:24px}.post-redesign-related .section-head{margin-bottom:14px}@media(max-width:980px){.post-redesign-layout{grid-template-columns:1fr}.post-redesign-toc{position:static}.toc-card-new .auto-toc-list{display:flex;gap:8px;flex-wrap:wrap}.toc-card-new .auto-toc-list a{width:auto;border:1px solid var(--border)!important;background:var(--bg2)}}@media(max-width:680px){.post-redesign-head{text-align:left}.post-redesign-meta{justify-content:flex-start}.post-redesign-summary,.post-redesign-info-grid,.post-redesign-nav,.related-amber-grid{grid-template-columns:1fr}.post-redesign-content{padding:24px}.post-redesign-resource{flex-direction:column;align-items:flex-start}.post-redesign-cover{border-radius:16px}}

/* Final footer redesign: elegant, spacious and polished */
.elegant-footer{
  position:relative;
  overflow:hidden;
  padding:64px 0 26px;
  color:oklch(92% 0.016 75);
  background:
    radial-gradient(circle at 12% -8%, oklch(72% 0.20 75 / .24), transparent 32%),
    radial-gradient(circle at 88% 10%, oklch(56% 0.16 58 / .14), transparent 30%),
    linear-gradient(180deg, oklch(18% 0.032 72), oklch(12% 0.024 72));
  border-top:1px solid oklch(45% 0.06 75 / .45);
}
.elegant-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.78),transparent 75%);
}
.elegant-footer::after{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.7;
}
.elegant-footer-glow{
  position:absolute;left:50%;bottom:-220px;width:760px;height:360px;transform:translateX(-50%);
  border-radius:50%;background:oklch(70% 0.18 75 / .12);filter:blur(70px);pointer-events:none;
}
.elegant-footer-wrap{position:relative;z-index:1;max-width:1280px!important;}
.ef-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  padding:34px 36px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  box-shadow:0 34px 100px rgba(0,0,0,.26);
  backdrop-filter:blur(18px);
}
.ef-logo{
  display:inline-flex;align-items:center;gap:11px;color:#fff;
  font-size:22px;font-weight:720;letter-spacing:-.03em;
}
.ef-logo svg{filter:drop-shadow(0 0 16px oklch(72% 0.20 75 / .42));}
.ef-hero h2{
  color:#fff;
  margin:22px 0 12px;
  max-width:820px;
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.ef-hero p{max-width:760px;margin:0;color:oklch(78% 0.024 75);font-size:17px;line-height:1.78;}
.ef-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;white-space:nowrap;}
.ef-actions .btn{box-shadow:none;min-height:42px;padding:0 18px;}
.ef-link{color:var(--accent);font-weight:700;}
.ef-main{
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(420px,1.15fr) minmax(280px,.82fr);
  gap:34px;
  padding:38px 6px 30px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ef-about>.mono{display:inline-flex;color:var(--accent);font-size:12px;letter-spacing:.08em;margin-bottom:16px;}
.ef-about p{max-width:390px;margin:0;color:oklch(75% 0.023 75);line-height:1.78;}
.ef-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.ef-chips span{padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.055);color:oklch(82% 0.04 75);font-size:12px;font-family:var(--font-mono);}
.ef-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ef-nav h5{color:#fff;margin:0 0 14px;font-size:12px;font-weight:720;letter-spacing:.09em;text-transform:uppercase;}
.ef-nav a{display:block;color:oklch(72% 0.023 75);font-size:14px;margin:9px 0;transition:color .2s,transform .2s;}
.ef-nav a:hover{color:var(--accent);transform:translateX(3px);}
.ef-subscribe{
  margin:0;
  padding:22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(255,255,255,.055);
  align-self:start;
}
.ef-subscribe label{display:block;color:#fff;font-weight:700;margin-bottom:12px;}
.ef-subscribe div{display:flex;gap:9px;}
.ef-subscribe input{flex:1;min-width:0;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.18);color:#fff;padding:0 12px;outline:none;}
.ef-subscribe input::placeholder{color:rgba(255,255,255,.46);}
.ef-subscribe button{height:44px;border:0;border-radius:12px;padding:0 16px;background:var(--accent);color:oklch(15% 0.026 70);font-weight:760;cursor:pointer;}
.ef-subscribe small{display:block;margin-top:12px;color:oklch(66% 0.022 75);line-height:1.55;}
.ef-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding-top:22px;
  color:oklch(64% 0.02 75);
  font-size:13px;
}
.ef-bottom>div{display:flex;gap:14px;align-items:center;}
.ef-bottom span+span::before{content:"";display:inline-block;width:5px;height:5px;margin:0 14px 0 0;border-radius:50%;background:var(--accent);opacity:.7;vertical-align:middle;}
.ef-bottom a{color:oklch(68% 0.022 75);}
.ef-bottom a:hover{color:var(--accent);}
@media(max-width:1080px){
  .ef-hero{align-items:flex-start;flex-direction:column;}
  .ef-main{grid-template-columns:1fr 1fr;}
  .ef-subscribe{grid-column:1/-1;}
}
@media(max-width:720px){
  .elegant-footer{padding-top:46px;}
  .ef-hero{padding:24px;border-radius:24px;}
  .ef-main,.ef-nav{grid-template-columns:1fr;}
  .ef-subscribe div{flex-direction:column;}
  .ef-bottom{flex-direction:column;align-items:flex-start;}
  .ef-bottom span+span::before{display:none;}
}


/* User adjustment: simplify footer navigation after removing extra links */
.ef-nav-simple{
  grid-template-columns:1fr !important;
  max-width:260px;
  align-self:center;
}
.ef-nav-simple div{
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}
.ef-nav-simple a{
  margin-bottom:0;
}


/* User adjustment: footer navigation removed, rebalance footer columns */
.ef-main{
  grid-template-columns:minmax(360px,1fr) minmax(320px,.72fr) !important;
  gap:40px !important;
}
.ef-subscribe{
  justify-self:end;
  width:min(100%,420px);
}
@media(max-width:900px){
  .ef-main{
    grid-template-columns:1fr !important;
  }
  .ef-subscribe{
    justify-self:stretch;
    width:100%;
  }
}





/* User adjustment: put copyright/legal at the absolute bottom center of the 404 page */
html, body {
  min-height: 100%;
}
body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
main {
  flex: 1 0 auto !important;
}
.elegant-footer {
  flex-shrink: 0 !important;
  padding-bottom: 22px !important;
}
.elegant-footer-wrap {
  display: block !important;
}
.ef-bottom {
  width: 100% !important;
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  color: oklch(66% 0.02 75) !important;
}
.ef-bottom > span,
.ef-bottom > div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.ef-bottom > span:first-child,
.ef-bottom > span:nth-child(2) {
  line-height: 1.5;
}
.ef-bottom > span:nth-child(2)::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 12px 0 0 !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  opacity: .72 !important;
  vertical-align: middle !important;
}
.ef-bottom > div {
  gap: 0 !important;
}
.ef-bottom > div a {
  position: relative;
  padding: 0 12px;
  color: oklch(70% 0.024 75) !important;
}
.ef-bottom > div a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.18);
}
.ef-bottom > div a:hover {
  color: var(--accent) !important;
}
@media (min-width: 560px) {
  .ef-bottom {
    display: grid !important;
    grid-template-columns: auto auto !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
  }
  .ef-bottom > div {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .ef-bottom > span:nth-child(2)::before {
    display: none !important;
  }
}

/* 404 page final amber background alignment */
:root{
  --text:#fff7ed;
  --muted:#d6c4aa;
  --primary:#f59e0b;
  --primary-2:#b45309;
  --accent:#fbbf24;
  --line:rgba(251,191,36,.18);
  --fg:#fff7ed;
  --fg2:#ead7bd;
  --muted2:#a89273;
  --border:rgba(251,191,36,.16);
  --surface:rgba(255,248,237,.085);
  --bg:#120b06;
  --bg2:#1a1009;
  --accent-bg:rgba(251,191,36,.11);
}
html,body{
  background:
    radial-gradient(circle at 12% 2%,rgba(245,158,11,.18),transparent 30%),
    radial-gradient(circle at 86% 8%,rgba(180,83,9,.18),transparent 32%),
    radial-gradient(circle at 50% 82%,rgba(251,191,36,.08),transparent 34%),
    linear-gradient(180deg,#120b06 0%,#1a1009 46%,#0f0a07 100%) !important;
  color:#fff7ed!important;
}
.site-header,
header{
  background:rgba(18,11,6,.78)!important;
  border-bottom-color:rgba(251,191,36,.16)!important;
  backdrop-filter:blur(18px);
}
main{
  background:transparent!important;
}
.error-hero,
.not-found-hero,
.hero-404,
section[class*="404"],
section:first-of-type{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(251,191,36,.20),transparent 32%),
    radial-gradient(circle at 84% 14%,rgba(217,119,6,.22),transparent 34%),
    radial-gradient(circle at 52% 100%,rgba(120,53,15,.26),transparent 42%),
    linear-gradient(180deg,#1b1008 0%,#251407 48%,#150c06 100%) !important;
  border-bottom:1px solid rgba(251,191,36,.16)!important;
}
.error-hero::before,
.not-found-hero::before,
.hero-404::before,
section:first-of-type::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 82%);
}
.error-hero::after,
.not-found-hero::after,
.hero-404::after,
section:first-of-type::after{
  content:"";
  position:absolute;
  left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#fbbf24,transparent);
  opacity:.62;
}
.error-hero > *,
.not-found-hero > *,
.hero-404 > *,
section:first-of-type > *{
  position:relative;
  z-index:1;
}
h1,
.error-code,
.not-found-code,
.hero-404 h1,
.error-hero h1,
.not-found-hero h1{
  color:transparent!important;
  background:linear-gradient(92deg,#fffaf0 0%,#ffe7b0 34%,#fbbf24 68%,#f59e0b 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  filter:drop-shadow(0 18px 42px rgba(245,158,11,.16));
}
h2,h3,h4,.logo,.nav-logo,.section-title{
  color:#fffaf0!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
p,li,small,.muted,.section-head p,.card p,.quick-card p,.recommend-card p{
  color:#d9c7ad!important;
}
.nav-menu a,.nav-links a{color:#cfb99b!important;}
.nav-menu a:hover,.nav-links a:hover{color:#fff7ed!important;background:rgba(251,191,36,.10)!important;}
.kicker,.eyebrow,.mono,.post-category,.section-label{
  color:#fbbf24!important;
  letter-spacing:.12em;
}
.card,
.quick-card,
.recommend-card,
.error-card,
.search-box,
.report-box,
.sidebar-card,
article,
[class*="card"],
[class*="panel"]{
  border-color:rgba(251,191,36,.20)!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(251,191,36,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,248,237,.085),rgba(120,53,15,.07))!important;
  box-shadow:0 22px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.btn-primary,
.search-submit,
button[type="submit"]{
  color:#241003!important;
  background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;
  border-color:transparent!important;
  box-shadow:0 16px 42px rgba(245,158,11,.25)!important;
}
.btn:not(.btn-primary),
a.btn:not(.btn-primary){
  color:#f4dfbd!important;
  border-color:rgba(251,191,36,.18)!important;
  background:rgba(255,255,255,.06)!important;
}
.btn:not(.btn-primary):hover,
a.btn:not(.btn-primary):hover{
  color:#fff7ed!important;
  border-color:rgba(251,191,36,.34)!important;
  background:rgba(251,191,36,.12)!important;
}
input,select,textarea{
  color:#fff7ed!important;
  background:rgba(18,11,6,.72)!important;
  border-color:rgba(251,191,36,.18)!important;
}
input::placeholder,textarea::placeholder{color:#9e8a70!important;}
.badge,.tag,.chip,[class*="tag"],[class*="badge"]{
  color:#ffe8b0!important;
  background:rgba(245,158,11,.13)!important;
  border-color:rgba(251,191,36,.24)!important;
}
.elegant-footer{
  background:
    radial-gradient(circle at 12% -8%, rgba(251,191,36,.20), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(217,119,6,.16), transparent 30%),
    linear-gradient(180deg,#211208,#120b06) !important;
  border-top-color:rgba(251,191,36,.28)!important;
}
@media(max-width:920px){.nav-menu{background:rgba(18,11,6,.96)!important;border-color:rgba(251,191,36,.18)!important;}}

/* Site-wide 404 amber background/footer unification */
:root{
  --text:#fff7ed;
  --muted:#d6c4aa;
  --primary:#f59e0b;
  --primary-2:#b45309;
  --accent:#fbbf24;
  --warn:#facc15;
  --line:rgba(251,191,36,.18);
  --fg:#fff7ed;
  --fg2:#ead7bd;
  --muted2:#a89273;
  --border:rgba(251,191,36,.16);
  --surface:rgba(255,248,237,.085);
  --surface-glass:rgba(255,248,237,.075);
  --bg:#120b06;
  --bg2:#1a1009;
  --accent-bg:rgba(251,191,36,.11);
}
html,body{
  background:
    radial-gradient(circle at 12% 2%,rgba(245,158,11,.18),transparent 30%),
    radial-gradient(circle at 86% 8%,rgba(180,83,9,.18),transparent 32%),
    radial-gradient(circle at 50% 82%,rgba(251,191,36,.08),transparent 34%),
    linear-gradient(180deg,#120b06 0%,#1a1009 46%,#0f0a07 100%) !important;
  color:#fff7ed!important;
}
body{background-attachment:fixed!important;}
.site-header,header,.header,.navbar-wrap{
  background:rgba(18,11,6,.78)!important;
  border-bottom-color:rgba(251,191,36,.16)!important;
  backdrop-filter:blur(18px);
}
main{background:transparent!important;}
.hero,
.home-hero,
.directory-hero,
.tool-detail-hero,
.course-hero,
.courses-hero,
.course-detail-hero,
.project-hero,
.project-detail-hero,
.opensource-hero,
.open-projects-hero,
.submit-hero,
.member-hero,
.search-hero,
.editor-hero,
.features-hero,
.archive-hero,
.page-hero,
main section:first-of-type{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(251,191,36,.20),transparent 32%),
    radial-gradient(circle at 84% 14%,rgba(217,119,6,.22),transparent 34%),
    radial-gradient(circle at 52% 100%,rgba(120,53,15,.26),transparent 42%),
    linear-gradient(180deg,#1b1008 0%,#251407 48%,#150c06 100%) !important;
  border-bottom:1px solid rgba(251,191,36,.16)!important;
}
.hero::before,
.home-hero::before,
.directory-hero::before,
.tool-detail-hero::before,
.course-hero::before,
.courses-hero::before,
.course-detail-hero::before,
.project-hero::before,
.project-detail-hero::before,
.opensource-hero::before,
.open-projects-hero::before,
.submit-hero::before,
.member-hero::before,
.search-hero::before,
.editor-hero::before,
.features-hero::before,
.archive-hero::before,
.page-hero::before,
main section:first-of-type::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 82%);
}
.hero::after,
.home-hero::after,
.directory-hero::after,
.tool-detail-hero::after,
.course-hero::after,
.courses-hero::after,
.course-detail-hero::after,
.project-hero::after,
.project-detail-hero::after,
.opensource-hero::after,
.open-projects-hero::after,
.submit-hero::after,
.member-hero::after,
.search-hero::after,
.editor-hero::after,
.features-hero::after,
.archive-hero::after,
.page-hero::after,
main section:first-of-type::after{
  content:"";
  position:absolute;
  left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#fbbf24,transparent);
  opacity:.62;
}
.hero > *,
.home-hero > *,
.directory-hero > *,
.tool-detail-hero > *,
.course-hero > *,
.courses-hero > *,
.course-detail-hero > *,
.project-hero > *,
.project-detail-hero > *,
.opensource-hero > *,
.open-projects-hero > *,
.submit-hero > *,
.member-hero > *,
.search-hero > *,
.editor-hero > *,
.features-hero > *,
.archive-hero > *,
.page-hero > *,
main section:first-of-type > *{position:relative;z-index:1;}
h1,.hero h1,.home-hero h1,.course-detail-hero h1,.project-detail-hero h1,.submit-hero h1,.member-hero h1,.search-hero h1,.page-hero h1{
  color:transparent!important;
  background:linear-gradient(92deg,#fffaf0 0%,#ffe7b0 34%,#fbbf24 68%,#f59e0b 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  filter:drop-shadow(0 18px 42px rgba(245,158,11,.16));
}
h2,h3,h4,.logo,.nav-logo,.brand,.section-title,.section-head h2,.card h3,.rich-card h3,.post-card h3 a,.course-card h3 a,.project-card h3 a,.sidebar-card h3{
  color:#fffaf0!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
p,li,small,.muted,.body-large,.body-small,.section-head p,.card p,.rich-card p,.post-card p,.course-card p,.project-card p,.sidebar-card p,.excerpt,.meta{
  color:#d9c7ad!important;
}
.nav-menu a,.nav-links a{color:#cfb99b!important;}
.nav-menu a:hover,.nav-links a:hover{color:#fff7ed!important;background:rgba(251,191,36,.10)!important;}
.kicker,.eyebrow,.mono,.post-category,.section-label,.topic-label{
  color:#fbbf24!important;
  letter-spacing:.12em;
}
.card,.rich-card,.tool-tile,.showcase-card,.post-card,.course-card,.project-card,.sidebar-card,.single-article,.single-article-rich,.submit-form-card,.submit-guide,.score-board,.pricing-grid>div,.compare-table,.feature-table,.content-page-cta,.article-summary-card,.archive-toolbar,.member-profile,.member-grid article,.course-track-row div,.opensource-globe,.academy-map,.directory-panel,[class*="card"],[class*="panel"]{
  border-color:rgba(251,191,36,.20)!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(251,191,36,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,248,237,.085),rgba(120,53,15,.07))!important;
  box-shadow:0 22px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.btn-primary,.nav-cta,.cta-primary,.search-submit,button[type="submit"],.submit,.page-numbers.current{
  color:#241003!important;
  background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;
  border-color:transparent!important;
  box-shadow:0 16px 42px rgba(245,158,11,.25)!important;
}
.btn:not(.btn-primary),.cta-secondary,a.btn:not(.btn-primary),.page-numbers{
  color:#f4dfbd!important;
  border-color:rgba(251,191,36,.18)!important;
  background:rgba(255,255,255,.06)!important;
}
.btn:not(.btn-primary):hover,.cta-secondary:hover,a.btn:not(.btn-primary):hover,.page-numbers:hover{
  color:#fff7ed!important;
  border-color:rgba(251,191,36,.34)!important;
  background:rgba(251,191,36,.12)!important;
}
input,select,textarea{
  color:#fff7ed!important;
  background:rgba(18,11,6,.72)!important;
  border-color:rgba(251,191,36,.18)!important;
}
input::placeholder,textarea::placeholder{color:#9e8a70!important;}
.badge,.tag,.chip,[class*="tag"],[class*="badge"],.course-meta span,.project-stats span,.resource-chips span,.tool-extra-meta span,.footer-tech-tags span{
  color:#ffe8b0!important;
  background:rgba(245,158,11,.13)!important;
  border-color:rgba(251,191,36,.24)!important;
}
.logo-mark,.tool-logo,.icon-box,.member-profile span{
  background:linear-gradient(135deg,#fbbf24,#d97706,#7c2d12)!important;
  color:#241003!important;
  box-shadow:0 18px 38px rgba(245,158,11,.22)!important;
}
.tool-score i,.score-list i,.progress-list i,meter::-webkit-meter-optimum-value{
  background:linear-gradient(90deg,#f59e0b,#fbbf24)!important;
  box-shadow:0 0 18px rgba(251,191,36,.22);
}
.score-board strong,.course-price-card strong,.stat strong,.metric strong{
  color:#fbbf24!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
}
.elegant-footer{
  background:
    radial-gradient(circle at 12% -8%, rgba(251,191,36,.20), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(217,119,6,.16), transparent 30%),
    linear-gradient(180deg,#211208,#120b06) !important;
  border-top-color:rgba(251,191,36,.28)!important;
}
@media(max-width:920px){
  .nav-menu{background:rgba(18,11,6,.96)!important;border-color:rgba(251,191,36,.18)!important;}
}