:root{
  /* Original palette */
  --bg:#0b1220;           /* deep navy */
  --panel:#0f1a2e;        /* card/panel */
  --text:#e5e7eb;         /* primary text */
  --muted:#94a3b8;        /* secondary text */
  --accent:#38bdf8;       /* cyan accent */
  --border:#1f2a44;       /* outlines/dividers */
  --shadow:0 10px 30px rgba(0,0,0,.25);

  /* Aliases so the new components use the old colors */
  --fg: var(--text);
  --card: var(--panel);
  --line: var(--border);
  --brand: var(--accent);
  --brand-2: #8be9fd;     /* soft accent grad partner */
  --btn: #0b162a;         /* slightly lighter than panel for buttons */
}
body[data-theme="light"]{
  --bg:#f7fafc;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#0284c7;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(2,8,23,.08);

  /* aliases */
  --fg: var(--text);
  --card: var(--panel);
  --line: var(--border);
  --brand: var(--accent);
  --brand-2:#38bdf8;
  --btn:#eef2f7;
}
.project-preview {
  width: 100%;
  height: 220px;              /* REQUIRED */
  background: #0b1220;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;        /* prevents cropping */
  display: block;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:0 16px}
.section{padding:28px 0}
.h2{font-size:28px;font-weight:700;margin:4px 0 10px}
.meta{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(6px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;flex-direction:column}
.brand strong{font-size:18px}
.brand span{font-size:12px;color:var(--muted)}
.nav-links{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--btn);border:1px solid var(--line);padding:8px 12px;border-radius:10px;color:var(--fg);cursor:pointer;transition:transform .04s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:12px}
.btn.active{outline:2px solid var(--brand)}

/* Grid/cards */
.grid{display:grid;gap:16px}
.projects-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card-media{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.08));}
.card-body{padding:14px}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tag{font-size:12px;border:1px solid var(--line);background:var(--btn);padding:2px 8px;border-radius:999px;color:var(--muted)}
.actions{display:flex;gap:8px;margin-top:8px}

/* Image fallback + preview */
.preview-missing{display:grid;place-items:center;height:180px;color:var(--muted);font-size:14px;background:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0, rgba(0,0,0,.06) 10px, transparent 10px, transparent 20px)}
.svg-preview{width:100%;height:180px;object-fit:contain;background:#0f172a}

/* Legend overlay */
.legend-btn{position:absolute;right:10px;bottom:10px}
.legend-overlay{position:fixed;inset:0;background:rgba(2,6,23,.55);display:grid;place-items:center;padding:24px}
.legend{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:520px;width:100%;padding:16px;box-shadow:var(--shadow)}
.legend-title{font-weight:700;margin-bottom:8px}
.legend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.legend li{display:flex;align-items:center;gap:8px}
.swatch{width:14px;height:14px;border-radius:4px;border:1px solid var(--line);background:linear-gradient(90deg,var(--brand),var(--brand-2))}

/* Featured strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(56,189,248,.06),transparent)}
.strip-inner{display:grid;gap:10px}
.strip-title{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.strip-items{display:flex;gap:10px;overflow:auto;padding:4px 0}
.strip-item{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 10px;white-space:nowrap}
.strip-thumb{width:32px;height:24px;display:grid;place-items:center}
.strip-thumb img{max-height:24px}

/* Footer */
.footer{border-top:1px solid var(--line);padding:18px 0;background:var(--card)}