:root { --bg:#fff; --fg:#000; --muted:#666; --line:#000; --hair:rgba(0,0,0,.12); --mono:'SF Mono','Fira Code','JetBrains Mono','Courier New',monospace; --max:1400px; }
:root[data-theme="dark"] { --bg:#121212; --fg:#f2f2f2; --muted:#a8a8a8; --line:#f2f2f2; --hair:rgba(255,255,255,.18); }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--fg); font-family:var(--mono); line-height:1.4; }
a { color:inherit; }
.grid-background { position:fixed; inset:0; background-image:linear-gradient(0deg,transparent 24%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.05) 26%,transparent 27%,transparent 74%,rgba(0,0,0,.05) 75%,rgba(0,0,0,.05) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.05) 26%,transparent 27%,transparent 74%,rgba(0,0,0,.05) 75%,rgba(0,0,0,.05) 76%,transparent 77%,transparent); background-size:50px 50px; pointer-events:none; z-index:1; }
:root[data-theme="dark"] .grid-background { background-image:linear-gradient(0deg,transparent 24%,rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.08) 75%,rgba(255,255,255,.08) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.08) 75%,rgba(255,255,255,.08) 76%,transparent 77%,transparent); }
.topnav { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:18px 40px; background:var(--bg); border-bottom:2px solid var(--line); }
.topnav .brand { font-weight:800; letter-spacing:2px; font-size:1.05rem; text-decoration:none; }
.topnav .brand .dot { color:var(--muted); }
.topnav .links { display:flex; gap:26px; font-size:.82rem; letter-spacing:.4px; }
.topnav .links a { text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent; }
.topnav .links a:hover,.topnav .links a.current { border-bottom-color:var(--fg); }
.theme-toggle { padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--fg); font:inherit; font-size:.75rem; cursor:pointer; }
.theme-toggle:hover { background:var(--fg); color:var(--bg); }
.container { position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:40px; }
.section-block { border:2px solid var(--line); margin-bottom:40px; padding:30px; }
.section-header { display:grid; grid-template-columns:1fr 2fr; gap:20px; border-bottom:2px solid var(--line); padding-bottom:20px; margin-bottom:20px; }
.section-header h1 { font-family:Arial,Helvetica,sans-serif; font-size:clamp(2rem,6vw,2.5rem); font-weight:900; letter-spacing:2px; }
.section-header p { font-size:.9rem; line-height:1.6; }
.search-label { display:block; font-size:.72rem; color:var(--muted); letter-spacing:.5px; margin-bottom:6px; }
.search-input { width:100%; padding:11px 18px; margin-bottom:20px; font: .9rem var(--mono); border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--fg); }
.project-freshness { margin:0 0 20px; padding:13px 16px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--fg) 5%, transparent); color:var(--muted); font-size:.78rem; line-height:1.55; }
.project-freshness strong { color:var(--fg); }
.project-freshness a { color:var(--fg); font-weight:700; }
.search-empty { color:var(--muted); margin-bottom:20px; }
.content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.project-card { border:1px solid var(--line); padding:20px; transition:background .2s,color .2s; display:flex; flex-direction:column; min-width:0; }
.project-card[hidden] { display:none; }
.project-card:hover { background:var(--fg); color:#fff; }
:root[data-theme="dark"] .project-card:hover { color:#121212; }
.project-card h3 { font-size:1.2rem; margin-bottom:10px; border-bottom:1px solid; padding-bottom:10px; font-weight:bold; overflow-wrap:anywhere; }
.project-card h3 a { text-decoration:none; }
.project-card p { font-size:.85rem; line-height:1.6; margin-bottom:12px; flex-grow:1; overflow-wrap:anywhere; }
.tech-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.tech-tag { font-size:.75rem; padding:3px 6px; background:#f0f0f0; border:1px solid var(--line); color:#000; }
.project-card:hover .tech-tag { background:#333; color:#fff; border-color:#fff; }
.project-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.project-links a { font-size:.8rem; padding:4px 10px; border:1px solid; text-decoration:none; transition:background .2s,color .2s; overflow-wrap:anywhere; }
.project-card:hover .project-links a { border-color:#fff; }
.project-links a:hover { background:#fff; color:#000; }
footer { position:relative; z-index:2; border-top:2px solid var(--line); padding:32px 40px; text-align:center; font-size:.8rem; letter-spacing:1.6px; color:var(--muted); }
footer p + p { margin-top:8px; } footer a { color:var(--fg); font-weight:700; text-decoration:none; }
@media (max-width:820px) { .topnav,.container,footer { padding-left:18px; padding-right:18px; } .topnav { flex-wrap:wrap; gap:10px; } .topnav .links { width:100%; gap:14px; overflow-x:auto; padding-bottom:2px; } .container { padding-top:24px; } .section-block { padding:18px; } .section-header { grid-template-columns:1fr; gap:10px; } .content-grid { grid-template-columns:1fr; gap:14px; } }

@media (min-width:821px) and (max-width:1120px) {
  .topnav,.container,footer { padding-left:28px; padding-right:28px; }
  .section-block { padding:24px; }
  .content-grid { gap:16px; }
}

@media (max-width:560px) {
  .grid-background { background-size:32px 32px; }
  .topnav { padding:14px 16px; gap:12px; }
  .topnav .brand { font-size:.96rem; }
  .topnav .links { flex-wrap:wrap; gap:10px 14px; overflow:visible; font-size:.76rem; line-height:1.25; }
  .container { padding:20px 12px 36px; }
  .section-block { margin-bottom:20px; padding:14px; border-width:1px; }
  .section-header { padding-bottom:14px; margin-bottom:14px; }
  .section-header h1 { font-size:2rem; letter-spacing:1px; }
  .section-header p { font-size:.82rem; }
  .search-input { padding:11px 14px; margin-bottom:16px; font-size:16px; }
  .content-grid { gap:12px; }
  .project-card { padding:16px; }
  .project-card h3 { font-size:1.05rem; margin-bottom:8px; padding-bottom:8px; }
  .project-card p { font-size:.82rem; line-height:1.55; }
  .tech-tags { margin-bottom:10px; }
  .project-links { gap:6px; }
  .project-links a { padding:5px 8px; }
  footer { padding:24px 16px; font-size:.72rem; letter-spacing:1.2px; }
}