*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --teal:#4F46E5; --teal-d:#4338CA; --navy:#3B82F6;
  --purple:#60A5FA; --pink:#F97316;
  --bg:#111827; --bg2:#161f2e; --bg3:#1b2636; --card:#1F2937;
  --border:rgba(255,255,255,0.08); --text:#FFFFFF; --muted:#94A3B8; --white:#ffffff;
}
html { scroll-behavior:smooth; }
body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.65; font-size:16px; }
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }
code { background:#0a0f1a; color:#A5B4FC; padding:2px 6px; border-radius:4px; font-family:'Fira Code',Consolas,monospace; font-size:0.85em; }
pre code { background:none; padding:0; color:inherit; }

/* NAV */
nav { position:sticky; top:0; z-index:100; background:rgba(17,24,39,0.97); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:0 24px; }
.nav-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo { display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:700; color:var(--white); text-decoration:none; }
.logo span { color:var(--teal); }
.logo-icon { width:30px; height:30px; background:var(--teal); border-radius:6px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; padding:5px; }
.logo-icon div { background:var(--white); border-radius:2px; }
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:0.84rem; padding:6px 11px; border-radius:6px; transition:all 0.2s; font-weight:500; }
.nav-links a:hover { color:var(--white); background:var(--border); }
.nav-links a.active { color:var(--teal); font-weight:600; }
.nav-links a.blog-link { color:var(--teal); }

/* HAMBURGER */
.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; transition:background 0.2s; }
.hamburger:hover { background:var(--border); }
.hamburger span { display:block; height:2px; background:var(--white); border-radius:2px; transition:all 0.3s; transform-origin:center; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media(max-width:768px){
  .hamburger { display:flex; }
  .nav-links {
    display:none;
    position:absolute;
    top:60px;
    left:0;
    right:0;
    background:rgba(17,24,39,0.98);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    padding:12px 16px 20px;
    gap:4px;
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:11px 14px; font-size:0.93rem; border-radius:8px; display:block; }
  .paths-grid { grid-template-columns:1fr; }
}

/* BUTTONS */
.btn { display:inline-block; border-radius:8px; font-weight:700; font-size:0.92rem; text-decoration:none; transition:all 0.2s; cursor:pointer; border:none; text-transform: uppercase; letter-spacing: 2px; }
.btn-primary { background:#F97316; color:#1F2937; padding:13px 24px; text-transform: uppercase; letter-spacing: 2px; }
.btn-primary:hover { background:var(--teal-d); transform:translateY(-1px); text-decoration:none; color:var(--white); }
.btn-secondary { background:transparent; color:var(--text); padding:12px 22px; border:1px solid var(--border); border-color:var(--teal); color:var(--teal); text-decoration:none; }
.btn-secondary:hover { border-color:var(--teal); color:var(--teal); text-decoration:none; }
.btn-outline { padding:10px 20px; border:1.5px solid var(--teal); color:var(--teal); }
.btn-outline:hover { background:var(--teal); color:var(--white); text-decoration:none; }
.btn-purple { background:var(--purple); color:var(--white); padding:12px 24px; }
.btn-purple:hover { background:#4238a0; color:var(--white); text-decoration:none; }

/* UTILITIES */
.design-note { background:rgba(249,115,22,0.08); border-bottom:1px solid rgba(249,115,22,0.2); padding:10px 24px; text-align:center; font-size:0.8rem; color:rgba(251,175,120,0.85); }
.section-label { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; color:var(--teal); text-transform:uppercase; margin-bottom:10px; }
.inner { max-width:1200px; margin:0 auto; padding:80px 24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:10px 20px;}
/* HERO */
.hero { padding:100px 24px 80px; text-align:center; background:radial-gradient(ellipse at top, #1e1b4b 0%, var(--bg) 70%); }
.hero-learn { padding:100px 24px 50px; text-align:center; background:radial-gradient(ellipse at top, #1e1b4b 0%, var(--bg) 70%); }
.hero-inner { max-width:1200px; margin:0 auto; }
.hero-tag { display:inline-block; background:rgba(79,70,229,0.15); color:var(--teal); font-size:0.75rem; font-weight:700; padding:5px 14px; border-radius:20px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:24px; border:1px solid rgba(79,70,229,0.3); }
.hero h1 { font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800; color:var(--white); line-height:1.15; margin-bottom:22px; }
.hero h1 em { color:var(--teal); font-style:normal; }
.hero-sub { font-size:1.1rem; color:var(--muted); max-width:620px; margin:0 auto 40px; }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.hero-btns2 { display:flex; align-items:center; text-align:left; gap:14px; justify-content:flex-start; flex-wrap:wrap; margin-top:28px; }
.hero-trust { font-size:0.8rem; color:rgba(148,163,184,0.7); }
.hero-btns2 .btn-primary { display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.2; padding:11px 24px; }
.hero-btns2 .btn-subtext { display:block; font-size:0.62rem; font-weight:500; text-transform:none; letter-spacing:0.2px; color:rgba(31,41,55,0.7); }

/* ROUTE CARDS */
.routes-section { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.routes-inner { max-width:1200px; margin:0 auto; padding:64px 24px; }
.routes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.route-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px 22px; text-align:center; transition:all 0.2s; cursor:pointer; }
.route-card:hover { border-color:var(--teal); transform:translateY(-3px); box-shadow:0 8px 24px rgba(79,70,229,0.12); }
.route-icon { font-size:2rem; margin-bottom:14px; }
.route-card h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.route-card p { font-size:0.83rem; color:var(--muted); margin-bottom:16px; }
.route-card a { font-size:0.83rem; font-weight:600; color:var(--teal); }


/* TOOL PREVIEW */
.tool-section { background:#0A141D; padding:80px 24px; }
.tool-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.feature-list { list-style:none; margin:20px 0 30px; }
.feature-list li { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--muted); }
.feature-list li::before { content:'→'; color:var(--teal); font-weight:700; flex-shrink:0; }
.mock-grid-wrap { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; }
.mock-grid { display:grid; grid-template-columns:180px 1fr; grid-template-rows:44px 1fr 36px; gap:6px; height:200px; }
.mc { border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:600; color:rgba(255, 250, 250, 0.7); letter-spacing:0.05em; }
.mc-h { background:#4338CA; grid-column:1/-1; }
.mc-s { background:var(--purple); }
.mc-m { background:#1E3A8A; }
.mc-f { background:#0B1220; grid-column:1/-1; font-size:0.65rem; }
.code-block { background:#0a0f1a; border-radius:8px; padding:16px; margin-top:14px; font-family:'Fira Code',Consolas,monospace; font-size:0.77rem; line-height:1.8; color:#A5B4FC; border:1px solid var(--border); }
.code-block .cp { color:#818CF8; }
.code-block .cm { color:#FFF; }

/* DETECTIVE */
.detective-section { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 24px; }
.detective-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center; }
.badge-purple { display:inline-block; background:rgba(79,70,229,0.2); color:#fff; font-size:0.73rem; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.06em; border:1px solid rgba(79,70,229,0.3); }

.tool-tabs { display:flex; background:var(--bg); border-bottom:1px solid var(--border); }
.ttab { padding:11px 16px; font-size:0.8rem; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.ttab.active { color:var(--teal); border-bottom-color:var(--teal); }
.tool-body { display:grid; grid-template-columns:1fr 1fr; min-height:160px; }
.code-in { padding:14px; background:#0a0f1a; font-family:monospace; font-size:0.76rem; color:#A5B4FC; line-height:1.7; border-right:1px solid var(--border); }
.results-p { padding:14px; background-color: rgb(8 13 22); }
.r-item { display:flex; gap:10px; align-items:flex-start; margin-bottom:11px; }
.r-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.rd-e { background:#e53e3e; } .rd-w { background:#dd6b20; } .rd-t { background:var(--teal); }
.r-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:rgba(229,231,235,0.5); }
.r-text { font-size:0.79rem; color:var(--muted); margin-top:2px; line-height:1.4; }
.tool-bar { background:var(--bg); border-top:1px solid var(--border); padding:12px 14px; display:flex; gap:10px; align-items:center; }
.tool-wrap { max-width:900px; margin:0 auto; padding:60px 24px; }

/* LIVE DIAGNOSTIC PANEL (Grid Detective results) */
.diagnostic-panel { background:var(--bg); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.diagnostic-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--bg2); border-bottom:1px solid var(--border); }
.diagnostic-title { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(229,231,235,0.5); }
.diagnostic-count { font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.diagnostic-body { padding:14px; max-height:280px; overflow-y:auto; }
.diagnostic-body .r-item:last-child { margin-bottom:0; }
.diagnostic-success { display:flex; align-items:center; gap:8px; color:#34D399; font-weight:700; font-size:0.83rem; padding:2px 0 4px; }

/* GRADIENT */
.gradient-section { background:var(--bg3); padding:80px 24px; }
.gradient-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:center; }
#tool .gradient-inner { grid-template-columns:1fr 1fr; }
.grad-preview { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.grad-canvas { height:140px; background:linear-gradient(135deg,#4F46E5 0%,#3B82F6 55%,#F97316 100%); }
.grad-controls { padding:14px 18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--border); }
.swatch { width:28px; height:28px; border-radius:50%; border:2px solid var(--bg2); cursor:pointer; flex-shrink:0; }
.grad-code { padding:12px 16px; background:#0a0f1a; font-family:monospace; font-size:0.75rem; color:#A5B4FC; line-height:1.7; border-top:1px solid var(--border); }

/* GRADIENT TYPES (gradient page) */
.types-section { background:var(--bg2); border-top:1px solid var(--border); padding:80px 24px; }
.types-inner { max-width:1200px; margin:0 auto; }
.type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }
.type-card { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:default; transition:all 0.2s; }
.type-card:hover { border-color:var(--teal); transform:translateY(-2px); }
.type-swatch { height:140px; }
.type-label { padding:11px 14px; font-size:0.83rem; font-weight:600; color:var(--white); }
.type-sub { font-size:0.76rem; font-weight:400; color:var(--muted); margin-top:4px; }

/* Shared gradient-type swatch colours (used on gradient.html and index.html) */
.type-swatch-linear { background:linear-gradient(135deg,var(--teal),var(--navy)); }
.type-swatch-radial { background:radial-gradient(circle,var(--purple),var(--navy)); }
.type-swatch-conic { background:conic-gradient(var(--pink),var(--purple),var(--teal),var(--pink)); }
.type-swatch-repeating { background:repeating-linear-gradient(45deg,var(--teal),var(--teal) 8px,var(--navy) 8px,var(--navy) 16px); }

/* LEARNING */
.learning-section { background:var(--bg); border-top:1px solid var(--border); padding:80px 24px; }
.learning-inner { max-width:1200px; margin:0 auto; }
#levels { border-top:none; padding-top:32px; }
.paths-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:32px 0 40px; }
.path-card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:26px; transition:all 0.2s; }
.path-card:hover { border-color:var(--teal); transform:translateY(-3px); box-shadow:0 8px 24px rgba(79,70,229,0.12); }
.path-card.featured { border-color:rgba(79,70,229,0.4); background:rgba(79,70,229,0.05); }
.path-eyebrow { position:absolute; top:-13px; left:24px; display:inline-flex; align-items:center; background:var(--teal); color:#fff; font-size:0.68rem; font-weight:700; letter-spacing:0.02em; padding:5px 12px; border-radius:20px; box-shadow:0 4px 10px rgba(79,70,229,0.35); white-space:nowrap; }
.path-tag { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; }
.pt-css { color:var(--teal); } .pt-tw { color:var(--navy); } .pt-js { color:#f59e0b; } .pt-scss { color:#EC4899; }
.path-card h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.path-card p { font-size:0.82rem; color:var(--muted); margin-bottom:14px; }
.pbar { height:3px; background:var(--border); border-radius:2px; margin-bottom:14px; }
.start-badge { display:inline-block; background:rgba(79,70,229,0.15); color:var(--teal); font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:10px; margin-bottom:8px; border:1px solid rgba(79,70,229,0.3); }
.path-card .path-meta { font-size:0.78rem; color:var(--muted); }
.path-card .path-link { font-size:0.83rem; font-weight:600; color:var(--teal); display:inline-block; margin-top:12px; }



/* LEARN HUB (page-specific) */
.skill-pills { display:flex; gap:10px; justify-content:center; margin:24px 0 0; flex-wrap:wrap; }
.skill-pill { padding:5px 14px; border-radius:20px; font-size:0.78rem; font-weight:600; border:1px solid var(--border); color:var(--muted); }
.skill-pill.active { background:rgba(79,70,229,0.15); border-color:var(--teal); color:var(--teal); }
.what-section { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 24px; }
.what-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.what-list { list-style:none; margin-top:20px; }
.what-list li { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--muted); }
.what-list li::before { content:'\2192'; color:var(--teal); flex-shrink:0; }
.lesson-panel { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.lesson-row { display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--border); }
.lesson-row:last-child { border-bottom:none; }
.lesson-num { width:26px; height:26px; border-radius:50%; background:rgba(79,70,229,0.15); color:var(--teal); font-weight:700; font-size:0.78rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lesson-title { font-weight:600; color:var(--white); font-size:0.87rem; }
.detective-cta { background:rgba(96,165,250,0.1); border:1px solid rgba(96,165,250,0.25); border-radius:14px; padding:32px; margin:40px auto 0; max-width:1200px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.detective-cta h3 { font-size:2rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.detective-cta p { color:var(--muted); font-size:0.9rem; margin-bottom:16px; }
.detective-cta .cta-actions { display:flex; gap:12px; flex-wrap:wrap; }
.detective-cta-preview { background:#0a0f1a; border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-top:20px; max-width:340px; }
.detective-cta-preview .r-item:last-child { margin-bottom:0; }
.detective-cta-preview-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:rgba(148,163,184,0.6); margin-bottom:10px; }

/* GRID DETECTIVE PAGE (how it works / detection) */
.how-section { background:var(--bg2); border-top:1px solid var(--border); padding:80px 24px; }
.how-inner { max-width:1200px; margin:0 auto; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.step-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px 22px; text-align:center; }
.step-emoji { font-size:2.2rem; margin-bottom:14px; }
.step-card h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.step-card p { font-size:0.85rem; color:var(--muted); }
.detect-section { background:var(--bg3); border-top:1px solid var(--border); padding:80px 24px; }
.detect-inner { max-width:1200px; margin:0 auto; }
.detect-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px; }
.detect-item { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 18px; display:flex; gap:12px; align-items:flex-start; font-size:0.88rem; color:var(--muted); }
.di-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); flex-shrink:0; margin-top:6px; }
.tool-frameimage img { width:100%; border-radius:10px; }

/* EDUCATORS PAGE (classroom guide) */
.steps-section { background:var(--bg2); border-top:1px solid var(--border); padding:80px 24px; }
.steps-inner { max-width:1200px; margin:0 auto; }
.step-list { list-style:none; margin-top:24px; }
.step-list li { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--muted); }
.step-list li:last-child { border-bottom:none; }
.step-num { width:30px; height:30px; border-radius:50%; background:var(--teal); color:var(--white); font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.audience-section { background:var(--bg3); border-top:1px solid var(--border); padding:80px 24px; }
.audience-inner { max-width:1200px; margin:0 auto; }
.audience-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }

/* EDUCATOR (shared home/educators download card) */
.educator-section { background:var(--bg2); border-top:1px solid var(--border); padding:80px 24px; }
.educator-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:center; }
.download-card { background:rgba(79,70,229,0.08); border:1px solid rgba(79,70,229,0.25); border-radius:16px; padding:30px; text-align:center; }
.download-card h3 { color:var(--white); font-size:1.05rem; font-weight:700; margin-bottom:14px; }
.badge-row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:20px; }
.badge { background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:12px; font-size:0.71rem; font-weight:600; color:var(--muted); padding:3px 10px; }

/* WHO */
.who-section { background:var(--bg3); border-top:1px solid var(--border); padding:80px 24px; }
.who-inner { max-width:1200px; margin:0 auto; }
.who-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px; }
.who-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:26px 20px; text-align:center; transition:all 0.2s; }
.who-card:hover { border-color:var(--purple); transform:translateY(-3px); }
.who-icon { font-size:1.8rem; margin-bottom:12px; }
.who-card h3 { font-size:0.95rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.who-card p { font-size:0.82rem; color:var(--muted); margin-bottom:14px; }
.who-card a { font-size:0.82rem; font-weight:600; color:var(--teal); }

/* ABOUT PAGE */
.about-main { max-width:1200px; margin:0 auto; padding:80px 24px 0; }
.about-story p { color:var(--muted); margin-bottom:16px; }
.about-story p:last-of-type { margin-bottom:28px; }

/* CREATOR SECTION */
.creator-section { padding:56px 24px 80px; }
.creator-inner { max-width:1200px; margin:0 auto; }
.creator-card { background:rgba(79,70,229,0.06); border:1px solid rgba(79,70,229,0.2); border-radius:16px; padding:32px; display:flex; gap:28px; align-items:flex-start; text-align:left; }
.creator-avatar-img { width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0; background:linear-gradient(135deg,var(--teal),var(--purple)); padding:14px; }
.creator-body { flex:1; }
.creator-card h3 { font-size:1.15rem; font-weight:700; color:var(--white); margin-bottom:10px; }
.creator-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.creator-tag { font-size:0.72rem; font-weight:600; color:var(--teal); background:rgba(79,70,229,0.12); border:1px solid rgba(79,70,229,0.25); border-radius:20px; padding:4px 12px; }
.creator-card p { font-size:0.88rem; color:var(--muted); margin-bottom:12px; }
.creator-card .social-links { display:flex; gap:16px; margin-top:6px; }
.creator-card .social-links a { display:inline-flex; align-items:center; gap:8px; font-size:0.83rem; color:var(--teal); font-weight:600; text-decoration:none; }
.creator-card .social-links a:hover { text-decoration:underline; }
.creator-card .social-links .social-icon { width:20px; height:20px; object-fit:contain; }
.mini-links { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mini-link { text-align:center; padding:18px 12px; }
.mini-link .mi { font-size:1.6rem; margin-bottom:8px; }
.mini-link h3 { font-size:0.82rem; font-weight:700; color:var(--white); margin-bottom:4px; }
.mini-link a { font-size:0.78rem; color:var(--teal); font-weight:600; }
.callout { background:rgba(79,70,229,0.08); border-left:3px solid var(--teal); padding:16px 20px; border-radius:0 8px 8px 0; margin-bottom:28px; }
.callout p { color:var(--muted); font-size:0.9rem; margin-bottom:8px; }
.callout a { font-size:0.88rem; font-weight:600; color:var(--teal); }
.values-section { background:var(--bg2); border-top:1px solid var(--border); padding:80px 24px; }
.values-inner { max-width:1200px; margin:0 auto; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.value-card .value-icon { font-size:1.4rem; margin-bottom:8px; }
.value-card .value-title { font-size:0.93rem; font-weight:700; color:var(--white); margin-bottom:5px; }
.value-card .value-desc { font-size:0.83rem; color:var(--muted); }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:32px; }
.stat { padding:22px; text-align:center; border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat-num { font-size:1.9rem; font-weight:800; color:var(--teal); }
.stat-label { font-size:0.8rem; color:var(--muted); margin-top:4px; }
.social-icon {width:20px;}

/* BLOG PAGE */
.blog-main { max-width:1200px; margin:0 auto; padding:80px 24px; display:grid; grid-template-columns:1fr 300px; gap:40px; }
.blog-main > div:first-child { min-width:0; }
.post-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:20px; transition:all 0.2s; }
.post-card:hover { border-color:rgba(79,70,229,0.4); transform:translateY(-2px); }
.post-card.featured { border-color:rgba(79,70,229,0.35); background:rgba(79,70,229,0.04); }
.post-card.featured .post-img { aspect-ratio:21/9; }

/* Landscape featured-image thumbnails on blog cards (16:9) */
.post-img { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,rgba(79,70,229,0.18),rgba(96,165,250,0.08)); }
.post-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.35s ease; }
.post-card:hover .post-img img { transform:scale(1.04); }
.post-img .post-img-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:2.6rem; }

.post-body { padding:20px 22px; }
.post-cat { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.post-card h3 { font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:8px; line-height:1.3; }
.post-meta { font-size:0.77rem; color:var(--muted); }

/* Single post featured image (landscape, above article) */
.post-featured-wrap { max-width:820px; margin:0 auto; padding:0 24px 10px; }
.featured-image-frame { width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 20px 45px rgba(0,0,0,0.35); background:linear-gradient(135deg,rgba(79,70,229,0.18),rgba(96,165,250,0.08)); }
.featured-image-frame img { width:100%; height:100%; object-fit:cover; display:block; }

/* Breadcrumb */
.breadcrumb { font-size:0.78rem; color:var(--muted); margin-bottom:14px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--teal); }
.breadcrumb .sep { color:rgba(148,163,184,0.4); }
.breadcrumb .current { color:var(--text); }

/* Prev / next post navigation */
.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; padding-top:24px; border-top:1px solid var(--border); }
.post-nav-link { display:block; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; text-decoration:none; transition:all 0.2s; }
.post-nav-link:hover { border-color:rgba(79,70,229,0.4); text-decoration:none; }
.post-nav-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--teal); margin-bottom:6px; display:block; }
.post-nav-title { font-size:0.86rem; font-weight:600; color:var(--white); line-height:1.35; }
.post-nav-link.next { text-align:right; }

/* Archive page */
.archive-group { margin-bottom:34px; }
.archive-group-title { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--teal); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.archive-row { display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); }
.archive-row:last-child { border-bottom:none; }
.archive-thumb { flex-shrink:0; width:110px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.archive-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.archive-row-body { flex:1; min-width:0; }
.archive-row-cat { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px; }
.archive-row-body h3 { font-size:0.95rem; font-weight:700; color:var(--white); margin-bottom:4px; line-height:1.3; }
.archive-row-date { font-size:0.76rem; color:var(--muted); }

/* Category empty state */
.empty-state { background:var(--card); border:1px dashed var(--border); border-radius:14px; padding:40px 24px; text-align:center; color:var(--muted); font-size:0.9rem; }
.empty-state strong { color:var(--white); display:block; font-size:1.02rem; margin-bottom:8px; }

/* Category filter pills on blog hub / archive */
.cat-pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.cat-pill { padding:6px 14px; border-radius:20px; font-size:0.8rem; font-weight:600; color:var(--muted); border:1px solid var(--border); text-decoration:none; transition:all 0.2s; }
.cat-pill:hover { color:var(--teal); border-color:rgba(79,70,229,0.4); text-decoration:none; }
.cat-pill.active { background:rgba(79,70,229,0.15); border-color:rgba(79,70,229,0.4); color:var(--teal); }

/* Blog hub hero: featured post spotlight */
.hero-featured-wrap { max-width:1000px; margin:36px auto 0; padding:0 24px; }
.hero-featured { display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; text-align:left; box-shadow:0 24px 50px rgba(0,0,0,0.35); text-decoration:none; }
.hero-featured-img { aspect-ratio:16/9; overflow:hidden; }
.hero-featured-img img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-featured-body { padding:28px 30px; display:flex; flex-direction:column; justify-content:center; }
.hero-featured-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; color:var(--teal); }
.hero-featured-body h2 { font-size:1.3rem; font-weight:800; color:var(--white); line-height:1.3; margin-bottom:10px; }
.hero-featured-body p { font-size:0.87rem; color:var(--muted); margin-bottom:16px; line-height:1.6; }
.hero-featured-meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
@media(max-width:700px){ .hero-featured { grid-template-columns:1fr; } }
.sidebar-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:18px; }
.sidebar-card h3 { font-size:0.93rem; font-weight:700; color:var(--white); margin-bottom:14px; }
.cat-link { display:block; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.87rem; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.cat-link:last-child { border-bottom:none; }
.cat-link:hover { color:var(--teal); }
.ql-link { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.ql-link:last-child { border-bottom:none; }
.ql-link:hover { color:var(--teal); }
.dev-warn { background:rgba(249,115,22,0.08); border:1px solid rgba(249,115,22,0.25); border-radius:10px; padding:14px 18px; font-size:0.83rem; color:rgba(251,175,120,0.9); margin-bottom:20px; }

/* BLOG POST (individual article pages) */
.post-hero { padding:70px 24px 40px; background:radial-gradient(ellipse at top, #1e1b4b 0%, var(--bg) 70%); }
.post-hero-inner { max-width:820px; margin:0 auto; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:0.83rem; color:var(--muted); margin-bottom:20px; text-decoration:none; }
.back-link:hover { color:var(--teal); text-decoration:none; }
.post-hero h1 { font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; color:var(--white); line-height:1.2; margin:14px 0 16px; }
.author-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:0.85rem; }
.author-row span:not(:last-child)::after { content:'\2022'; margin-left:10px; color:rgba(148,163,184,0.5); }
.post-content { max-width:100%; }
.post-content h2 { font-size:1.5rem; font-weight:800; color:var(--white); margin:38px 0 14px; display:flex; align-items:center; gap:10px; }
.post-content h3 { font-size:1.12rem; font-weight:700; color:var(--white); margin:26px 0 10px; }
.post-content p { color:var(--muted); margin-bottom:16px; font-size:0.95rem; line-height:1.75; }
.post-content ul, .post-content ol { margin:0 0 20px 22px; color:var(--muted); font-size:0.95rem; line-height:1.75; }
.post-content li { margin-bottom:8px; }
.post-content li strong { color:var(--white); }
.post-content code { background:#0a0f1a; color:#A5B4FC; padding:2px 6px; border-radius:4px; font-family:'Fira Code',Consolas,monospace; font-size:0.85em; }
.post-content pre { background:#0a0f1a; border:1px solid var(--border); border-radius:8px; padding:16px; overflow-x:auto; margin:20px 0; font-family:'Fira Code',Consolas,monospace; font-size:0.8rem; line-height:1.7; color:#A5B4FC; }
.post-content pre code { background:none; padding:0; color:inherit; }
.mistake-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(96,165,250,0.15); color:var(--purple); font-size:0.85rem; font-weight:800; flex-shrink:0; }
.fix-label { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#34D399; margin-bottom:6px; }
.wrong-label { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#F87171; margin-bottom:6px; }
.post-callout { background:rgba(79,70,229,0.08); border:1px solid rgba(79,70,229,0.25); border-radius:10px; padding:16px 20px; margin:24px 0; font-size:0.9rem; color:var(--muted); }
.post-callout strong { color:var(--white); }
.timeline { border:1px solid var(--border); border-radius:14px; overflow:hidden; margin:24px 0; background:var(--card); }
.t-row { display:flex; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); align-items:flex-start; }
.t-row:last-child { border-bottom:none; }
.t-time { flex-shrink:0; width:78px; font-size:0.78rem; font-weight:700; color:var(--teal); padding-top:2px; }
.t-body h4 { font-size:0.92rem; font-weight:700; color:var(--white); margin-bottom:4px; }
.t-body p { font-size:0.85rem; color:var(--muted); margin-bottom:0; }
.demo-frame { border:1px solid var(--border); border-radius:10px; overflow:hidden; margin:20px 0; }
.demo-grid { display:grid; grid-template-areas:"header header header" "nav main aside" "footer footer footer"; grid-template-columns:120px 1fr 140px; grid-template-rows:auto 160px auto; gap:8px; padding:10px; background:var(--bg3); }
.demo-grid > div { border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:rgba(255,255,255,0.85); padding:10px; }
.demo-header { grid-area:header; background:#4338CA; }
.demo-nav { grid-area:nav; background:#1E3A8A; }
.demo-main { grid-area:main; background:var(--purple); }
.demo-aside { grid-area:aside; background:#1E3A8A; }
.demo-footer { grid-area:footer; background:#0B1220; }
.share-row { display:flex; gap:12px; margin-top:36px; padding-top:24px; border-top:1px solid var(--border); flex-wrap:wrap; }
@media(max-width:520px){ .demo-grid { grid-template-areas:"header" "nav" "main" "aside" "footer"; grid-template-columns:1fr; } }

/* FINAL CTA */
.final-cta { background:radial-gradient(ellipse at center, #1e1b4b 0%, var(--bg) 80%); padding:80px 24px; text-align:center; }
.final-cta h2 { font-size:2rem; font-weight:800; color:var(--white); margin-bottom:14px; }
.final-cta p { color:var(--muted); margin-bottom:32px; }
.final-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* FOOTER */
footer { border-top:1px solid var(--border); padding:32px 24px; background:var(--bg); }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-logo { font-size:0.9rem; color:var(--muted); }
.footer-logo strong { color:var(--teal); }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a { font-size:0.8rem; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--teal); }

/* image / icon helpers */
.logo-gridlock{width:180px;padding:10px;}
.icon-gridlock{width:60px;}
.icon2-gridlock{width:100px; text-align: center;}
.icon3-gridlock{width:100%;height:auto;border-radius:10px;}
.ghmiddle img{width:400px;text-align:center;padding-bottom:30px;}
.section-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 14px;
}
.section-description {
    color: var(--muted);
    margin-bottom: 22px;
}

.mb-8{ margin-bottom:8px; }
.mb-10{ margin-bottom:10px; }
.mb-12{ margin-bottom:12px; }
.mb-14{ margin-bottom:14px; }

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .tool-inner,.detective-inner,.gradient-inner,.educator-inner,
  .about-main,.blog-main,.what-inner { grid-template-columns:1fr; }
  .routes-grid,.paths-grid,.who-grid,.values-grid,.type-grid,.audience-grid { grid-template-columns:repeat(2,1fr); }
  .ghmiddle img{ width:250px; }
  .stat-row,.mini-links { grid-template-columns:repeat(2,1fr); }
  .steps-grid,.detect-grid { grid-template-columns:1fr; }
  .creator-card { flex-direction:column; align-items:center; text-align:center; }
  .creator-tags,.creator-card .social-links { justify-content:center; }
  .tool-body { grid-template-columns:1fr; }
  .detective-cta { grid-template-columns:1fr; text-align:center; }
  .detective-cta-preview { width:100%; max-width:340px; margin:0 auto; text-align:left; }
}

/* =========================================================
   GRID GENERATOR TOOL — live preview widget
   (previously undefined, causing the preview to render unstyled)
   ========================================================= */
.grid-preview { position:relative; display:grid; grid-template-columns:200px 1fr auto; grid-template-rows:auto auto; gap:8px; min-height:220px; background:var(--bg3); border:1px solid var(--border); }
.grid-item { position:relative; background:linear-gradient(135deg,var(--teal),var(--purple)); color:var(--white); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.95rem; min-height:56px; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.grid-item[data-info]:not([data-info=""])::after { content:attr(data-info); position:absolute; bottom:3px; right:6px; font-size:0.6rem; font-weight:600; color:rgba(255,255,255,0.75); }
.loading-overlay { position:absolute; inset:0; z-index:5; background:rgba(17,24,39,0.55); border-radius:8px; align-items:center; justify-content:center; }
.spinner { width:34px; height:34px; border:3px solid rgba(255,255,255,0.2); border-top-color:var(--teal); border-radius:50%; animation:gh-spin 0.7s linear infinite; }
@keyframes gh-spin { to { transform:rotate(360deg); } }
.code-output { font-family:'Fira Code',Consolas,monospace; white-space:pre; }
.tool-page #code-output.code-output { background:#0a0f1a !important; color:#A5B4FC !important; border:1px solid var(--border) !important; }
.tool-page #analyze-input { background:#0a0f1a !important; color:#A5B4FC !important; }

/* =========================================================
   TOOL PAGE THEME — retint the generator UI to match the
   site's dark navy / indigo palette instead of default Tailwind
   ========================================================= */
.tool-page .mt-6.bg-white,
.tool-page #tutorial-modal .bg-white,
.tool-page #share-modal .bg-white,
.tool-page .bg-white { background:var(--card) !important; border:1px solid var(--border); color:var(--text); }
.tool-page main { background:none; border:none; }
.tool-page .shadow-xl,.tool-page .shadow-lg,.tool-page .shadow-2xl { box-shadow:0 10px 34px rgba(0,0,0,0.4) !important; }
.tool-page .border-b,.tool-page .border-t,.tool-page .border-y { border-color:var(--border) !important; }
.tool-page h1,.tool-page h2,.tool-page h3,.tool-page h4,.tool-page label { color:var(--white); }
.tool-page p,.tool-page span { color:inherit; }

/* neutral gray text -> theme text/muted */
.tool-page .text-gray-900,.tool-page .text-gray-800 { color:var(--white) !important; }
.tool-page .text-gray-700,.tool-page .text-gray-600 { color:var(--muted) !important; }
.tool-page .text-gray-500,.tool-page .text-gray-400 { color:rgba(148,163,184,0.8) !important; }

/* neutral gray surfaces -> theme surfaces */
.tool-page .bg-gray-50,.tool-page .bg-gray-100 { background-color:var(--bg3); }
.tool-page .bg-gray-200 { background-color:rgba(255,255,255,0.08); color:var(--white); }
.tool-page .bg-gray-300 { background:var(--bg3) !important; color:var(--muted) !important; border:1px solid var(--border); }
.tool-page .bg-gray-300:hover,.tool-page .hover\:bg-gray-400:hover { background:rgba(255,255,255,0.1) !important; color:var(--white) !important; }
.tool-page .bg-gray-800 { background:var(--bg2) !important; }
.tool-page .bg-gray-900 { background:var(--bg) !important; }
.tool-page .hover\:bg-gray-50:hover,.tool-page .hover\:bg-gray-700:hover { background:rgba(255,255,255,0.06) !important; }
.tool-page .border-gray-200,.tool-page .border-gray-300 { border-color:var(--border) !important; }

/* form controls */
.tool-page input[type="text"],.tool-page input[type="number"],
.tool-page select,.tool-page textarea {
  background:var(--bg3); border:1px solid var(--border); color:var(--white);
}
.tool-page input[type="text"]:focus,.tool-page input[type="number"]:focus,
.tool-page select:focus,.tool-page textarea:focus,
.tool-page .focus\:border-purple-500:focus { outline:none !important; border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(79,70,229,0.2); }
.tool-page input::placeholder,.tool-page textarea::placeholder { color:rgba(148,163,184,0.55); }
.tool-page #line-nums { background:var(--bg) !important; color:rgba(148,163,184,0.5) !important; }
.tool-page .border,.tool-page .border-2 { border-color:var(--border); }

/* blue -> teal (Examples box, tabs, links, primary buttons) */
.tool-page .bg-blue-50,.tool-page .bg-blue-100 { background:rgba(79,70,229,0.1) !important; }
.tool-page .bg-blue-200 { background:rgba(79,70,229,0.22) !important; }
.tool-page .border-blue-200,.tool-page .border-blue-300 { border-color:rgba(79,70,229,0.35) !important; }
.tool-page .text-blue-600,.tool-page .text-blue-700 { color:var(--teal) !important; }
.tool-page .text-blue-800,.tool-page .text-blue-900 { color:#A5B4FC !important; }
.tool-page .bg-blue-500,.tool-page .bg-blue-600,.tool-page .bg-indigo-600 { background:var(--teal) !important; }
.tool-page .hover\:bg-blue-700:hover,.tool-page .from-blue-500,.tool-page .from-blue-600 { background:var(--teal-d) !important; }
.tool-page .to-blue-600,.tool-page .to-blue-700 { --tw-gradient-to:var(--teal-d) !important; }
.tool-page .from-blue-500,.tool-page .from-blue-600 { --tw-gradient-from:var(--teal) !important; }

/* purple / pink -> theme purple accent */
.tool-page .bg-purple-200 { background:rgba(96,165,250,0.22) !important; color:#0b1220 !important; }
.tool-page .border-purple-200,.tool-page .border-purple-300,.tool-page .border-purple-500 { border-color:rgba(96,165,250,0.4) !important; }
.tool-page .text-purple-600,.tool-page .text-purple-700 { color:var(--purple) !important; }
.tool-page .text-purple-800,.tool-page .text-purple-900 { color:#C7D2FE !important; }
.tool-page .bg-purple-500,.tool-page .bg-purple-600,.tool-page .peer-checked\:bg-purple-500 { background:var(--purple) !important; color:#0b1220; }

/* Colour Styling (CSS Gradient) toggle switch - grayed out when off, brighter when on */
.tool-page #gradient-enabled ~ .gradient-toggle-track {
  background:#48566B !important;
  opacity:0.55;
  box-shadow:none;
  transition:background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.tool-page #gradient-enabled:hover ~ .gradient-toggle-track { opacity:0.75; }
.tool-page #gradient-enabled:checked ~ .gradient-toggle-track {
  background:linear-gradient(135deg,#8B5CF6,#60A5FA) !important;
  opacity:1;
  box-shadow:0 0 10px rgba(139,92,246,0.6);
}
.tool-page .hover\:bg-purple-700:hover,.tool-page .from-purple-600,.tool-page .from-purple-700 { background:#3f8ae0 !important; }
.tool-page .to-pink-600,.tool-page .to-pink-700 { --tw-gradient-to:var(--pink) !important; }
.tool-page .from-purple-50,.tool-page .to-indigo-50,.tool-page .to-pink-50 { background:rgba(96,165,250,0.08) !important; }

/* green -> success tint that still reads on dark */
.tool-page .bg-green-50 { background:rgba(16,185,129,0.1) !important; }
.tool-page .bg-green-200 { background:rgba(16,185,129,0.25) !important; }
.tool-page .border-green-200 { border-color:rgba(16,185,129,0.35) !important; }
.tool-page .text-green-600,.tool-page .text-green-800 { color:#34D399 !important; }
.tool-page .text-green-300 { color:#6EE7B7 !important; }
.tool-page .bg-green-500,.tool-page .bg-green-600,.tool-page .from-green-500,.tool-page .from-green-600 { background:#10B981 !important; }
.tool-page .hover\:bg-green-700:hover,.tool-page .to-green-600,.tool-page .to-green-700 { background:#0d9c6d !important; }

/* red -> Grid Detective accent + validation errors */
.tool-page .bg-red-600,.tool-page .bg-red-500 { background:#DC2626 !important; }
.tool-page .bg-brown-600 { background:#B77730 !important; }
.tool-page .bg-red-50 { background:rgba(239,68,68,0.1) !important; }
.tool-page .border-red-200,.tool-page .border-red-300 { border-color:rgba(239,68,68,0.35) !important; }
.tool-page .text-red-700 { color:#F87171 !important; }
.tool-page .text-green-700 { color:#34D399 !important; }
.tool-page .text-orange-600 { color:#FB923C !important; }

/* yellow -> warning tint (comma-warning, analyzer tips) */
.tool-page .bg-yellow-50 { background:rgba(234,179,8,0.1) !important; }
.tool-page .border-yellow-300 { border-color:rgba(234,179,8,0.35) !important; }
.tool-page .text-yellow-700 { color:#FBBF24 !important; }

/* yellow/orange "Ad-Free" box -> brand orange tint */
.tool-page .from-yellow-50,.tool-page .to-orange-50 { background:rgba(249,115,22,0.08) !important; }
.tool-page .border-yellow-200 { border-color:rgba(249,115,22,0.3) !important; }

/* code tabs / analyzer tabs default (inactive) state */
.tool-page .code-tab,.tool-page .analyzer-tab { transition:background 0.15s,color 0.15s; }

/* pro-features "coming soon" preview panel - keep muted on dark bg */
.tool-page .opacity-50 { opacity:0.45; }

/* scrollbar polish inside dark textareas/pre */
.tool-page pre.code-output::-webkit-scrollbar,.tool-page textarea::-webkit-scrollbar { width:8px; height:8px; }
.tool-page pre.code-output::-webkit-scrollbar-thumb,.tool-page textarea::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

.gridgentry {width:100%;  overflow:hidden;}
.gridgentry img {width:100%; height:auto; display:block; }

/* ===== ADDITIONAL UTILITIES ===== */
.text-muted { color:var(--muted); }
.text-center { text-align:center; }
.w-full { width:100%; }
.btn-block { display:block; text-align:center; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }
.mb-4{ margin-bottom:4px; }
.mt-0{ margin-top:0; }
.mb-18{ margin-bottom:18px; }
.mt-24{ margin-top:24px; }
.mt-32{ margin-top:32px; }
.pt-40{ padding-top:40px; }


/* HOME - learning path progress bar fill */
.pbar-fill { height:3px; background:var(--teal); border-radius:2px; width:0%; }

/* BLOG - category colours, excerpts, links, meta rows */
.post-cat-purple { color:var(--purple); }
.post-cat-teal { color:var(--teal); }
.post-excerpt { font-size:0.85rem; color:var(--muted); margin:8px 0 14px; }
.post-link { font-size:0.85rem; font-weight:600; color:var(--teal); }
.post-meta-row { display:flex; gap:16px; align-items:center; }
.cat-count { float:right; }
.sidebar-text { font-size:0.82rem; color:var(--muted); margin-bottom:12px; }
.newsletter-input { width:100%; padding:9px 12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; font-size:0.84rem; color:var(--text); margin-bottom:8px; }

/* EDUCATORS - step list titles, fine print, audience cards */
.step-title { color:var(--white); }
.fine-print { font-size:0.76rem; color:var(--muted); }
.audience-card h3 { font-size:0.95rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.audience-card p { font-size:0.85rem; color:var(--muted); }

/* TOOL PAGES - shared compact hero used by the two generator tools */
.tool-hero-title { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--white); }
.tool-hero-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn-compact { font-weight:600; text-transform:none; letter-spacing:normal; }

/* GRID GENERATOR - decorative swatches, demo builder, code panels */
.icon-gradient-swatch { background:linear-gradient(135deg,#534AB7,#D4537E); }
.color-preview-default { background:#1D9E75; }
.gradient-preview-default { background:linear-gradient(to right,#1D9E75,#042C53); }
.items-color-default { background:#534AB7; }
.items-gradient-default { background:linear-gradient(to bottom,#534AB7,#D4537E); }
.builder-demo { min-height:80px; }
.builder-demo-grid { height:60px; }
.span-col-2 { grid-column:span 2; }
.span-row-2 { grid-row:span 2; }
.code-output-lg { min-height:180px; }
.code-output-sm { min-height:100px; }

/* learning languages */
.lesson-types{width:100%;max-width:850px;margin:0 auto;text-align:center}
.lesson-types-heading{display:flex;align-items:center;gap:35px;margin-bottom:25px;color:#8490ad;font-size:13px;letter-spacing:1.4px}
.lesson-types-heading span{flex:1;height:1px;background:rgba(142,154,184,.3)}
.technology-list{display:flex;justify-content:center;font-size:14px}
.technology-list div{padding:0 25px}
.technology-list div+div{border-left:1px solid rgba(142,154,184,.25)}
.hero-features{display:flex;justify-content:center;gap:32px;margin-top:28px;color:#7f8ba8;font-size:14px}
.hero-features span{position:relative}
.hero-features span:not(:last-child)::after{content:"";position:absolute;right:-18px;top:50%;width:4px;height:4px;border-radius:50%;background:#5a4fff;transform:translateY(-50%)}
@media(max-width:700px){.lesson-types-heading{gap:15px}.technology-list{flex-wrap:wrap;gap:15px 0}.technology-list div{padding:0 15px}.hero-features{flex-wrap:wrap;gap:15px 30px}}

/* =========================================================
   GRADIENT GENERATOR TOOL — page-specific UI
   (moved from inline <style> in css-gradient-generator.html)
   ========================================================= */
.tool-card {
    background: linear-gradient(180deg, var(--card) 0%, var(--bg2) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 30px -18px rgba(0,0,0,0.6);
}
.tool-card-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.tool-card-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(79,70,229,0.8); flex-shrink: 0; display: inline-block; }
.field-label { display:block; font-size:0.74rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: rgba(148,163,184,0.75); margin-bottom:8px; }

/* ---- Mode switcher ---- */
.mode-switcher { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.mode-tab { transition: all 0.18s; color: var(--muted); }
.mode-tab.active { background: linear-gradient(135deg, var(--teal), var(--teal-d)); box-shadow: 0 4px 14px -4px rgba(79,70,229,0.6); color: var(--white); font-weight: 600; }

/* ---- Direction compass ---- */
.dir-compass { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-width:170px; }
.dir-btn { transition: all 0.15s; background: var(--bg2); border: 1px solid var(--border) !important; color: var(--muted); font-size: 1rem; aspect-ratio: 1; display:flex; align-items:center; justify-content:center; border-radius: 10px; }
.dir-btn:hover { border-color: rgba(79,70,229,0.5) !important; color: var(--white); }
.dir-btn.active { background: rgba(79,70,229,0.18); border-color: var(--teal) !important; color: var(--teal); font-weight: 700; box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
.dir-center { display:flex; align-items:center; justify-content:center; font-size:0.65rem; color: rgba(148,163,184,0.5); letter-spacing:0.05em; text-transform:uppercase; }

/* ---- Preset swatches ---- */
.preset-swatch { transition: transform 0.15s, box-shadow 0.15s; border-color: var(--border) !important; position: relative; border-radius: 10px !important; }
.preset-swatch:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 8px 18px -6px rgba(0,0,0,0.5); z-index: 2; }

/* ---- Code area / output ---- */
.code-area { font-family: 'JetBrains Mono','Courier New', Courier, monospace; tab-size: 2; }
.code-area:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.code-panel { background: #0a0f1a; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.code-panel-bar { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); }
.code-panel-dots { display:flex; gap:5px; }
.code-panel-dots span { width:8px; height:8px; border-radius:50%; background: rgba(148,163,184,0.25); }
.code-panel pre { font-family: 'JetBrains Mono','Courier New',Courier,monospace; }

/* ---- Live preview frame ---- */
#gradient-preview { transition: background 0.3s ease; height:280px; background:linear-gradient(to right,#6366F1,#EC4899); }
.preview-frame { border-radius: 14px; border: 1px solid var(--border); padding: 6px; background: var(--bg2); }
.size-switch { display:flex; gap:6px; background: var(--bg2); border:1px solid var(--border); border-radius: 10px; padding: 4px; }
.size-btn { flex:1; border-radius: 7px; transition: all 0.15s; color: var(--muted); }
.size-btn.active { background: var(--card); color: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }

/* ---- Format tabs ---- */
.format-tab { transition: all 0.15s; background: var(--bg2); border-color: var(--border) !important; color: var(--muted); }
.format-tab.active { background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: white; border-color: transparent !important; }

/* =========================================================
   BLOG POST STYLES - shared across all /blog/ post pages
   (moved from inline <style> blocks that were duplicated in
   60-minute-lesson.html, archive.html, css-grid-mistakes.html,
   css-gradients-that-look-good.html, css-grid-exercises-for-
   students.html, css-grid-overflow.html, css-minmax-grid.html,
   why-css-grid-breaks-on-smaller-screens.html and
   new-post-template.html)

   Accent colors: a handful of shared "demo" and "example"
   widgets are recolored per post to match that post's category
   (teal = default/Tutorials, purple = Grid Detective,
   pink = Gradient Tool). Add .accent-purple or .accent-pink to
   the post's <article class="post-content"> tag to switch them;
   no class is needed for the default teal.
   ========================================================= */

/* ---- Hero ---- */
.post-hero { padding:70px 24px 40px; background:radial-gradient(ellipse at top, #1e1b4b 0%, var(--bg) 70%); }
.post-hero-inner { max-width:820px; margin:0 auto; }
.post-hero h1 { font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; color:var(--white); line-height:1.2; margin:14px 0 16px; }
.post-hero-sub { color:var(--muted); font-size:0.95rem; }
/* Archive index page uses a tighter gap before its subtitle */
.post-hero.archive-hero h1 { margin:14px 0 10px; }

.back-link { display:inline-flex; align-items:center; gap:6px; font-size:0.83rem; color:var(--muted); margin-bottom:20px; text-decoration:none; }
.back-link:hover { color:var(--teal); text-decoration:none; }

.author-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:0.85rem; }
.author-row span:not(:last-child)::after { content:'\2022'; margin-left:10px; color:rgba(148,163,184,0.5); }

/* ---- Featured image ---- */
.post-featured-wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.featured-image-frame { max-width:900px; margin:0 auto 8px; border-radius:14px; overflow:hidden; border:1px solid var(--border); }
.featured-image-frame img { display:block; width:100%; height:auto; }

/* ---- Article body ---- */
.post-content {
  --accent: var(--teal);
  --accent-soft: rgba(79,70,229,0.15);
  --accent-soft-strong: rgba(79,70,229,0.12);
  max-width:100%;
  min-width:0;
}
.post-content.accent-purple { --accent: var(--purple); --accent-soft: rgba(96,165,250,0.15); --accent-soft-strong: rgba(96,165,250,0.12); }
.post-content.accent-pink { --accent: var(--pink); --accent-soft: rgba(249,115,22,0.15); --accent-soft-strong: rgba(249,115,22,0.12); }

.blog-main > div:first-child { min-width:0; }

.post-content h2 { font-size:1.4rem; font-weight:800; color:var(--white); margin:36px 0 14px; }
/* Numbered section headings, e.g. the "5 mistakes" post */
.post-content h2.numbered-heading { font-size:1.35rem; margin:36px 0 12px; display:flex; align-items:center; gap:10px; }
.post-content h3 { font-size:1.05rem; font-weight:700; color:var(--white); margin:22px 0 10px; }
.post-content p { color:var(--muted); margin-bottom:16px; font-size:0.95rem; line-height:1.75; }
.post-content ul, .post-content ol { margin:0 0 20px 22px; color:var(--muted); font-size:0.95rem; line-height:1.75; }
.post-content li { margin-bottom:8px; }
.post-content li strong { color:var(--white); }
.post-content code { background:#0a0f1a; color:#A5B4FC; padding:2px 6px; border-radius:4px; font-family:'Fira Code',Consolas,monospace; font-size:0.85em; }
.post-content pre { background:#0a0f1a; border:1px solid var(--border); border-radius:8px; padding:16px; overflow-x:auto; margin:20px 0; font-family:'Fira Code',Consolas,monospace; font-size:0.8rem; line-height:1.7; color:#A5B4FC; }
.post-content pre code { background:none; padding:0; color:inherit; }

.mistake-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(96,165,250,0.15); color:var(--purple); font-size:0.85rem; font-weight:800; flex-shrink:0; }
.fix-label { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#34D399; margin-bottom:6px; }
.wrong-label { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#F87171; margin-bottom:6px; }

/* ---- Callouts ---- */
.callout { background:rgba(79,70,229,0.08); border:1px solid rgba(79,70,229,0.25); border-radius:10px; padding:16px 20px; margin:24px 0; font-size:0.9rem; color:var(--muted); }
.callout strong { color:var(--white); }

.mini-callout { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:12px 18px; margin:20px 0; font-size:0.85rem; color:var(--muted); }
.mini-callout a { color:var(--accent); font-weight:600; }

/* ---- Cause / fix comparison blocks ---- */
.cause-fix { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 22px; }
.cause-fix > div { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.cause-fix .lbl { font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; }
.cause-fix .cause .lbl { color:#dd6b20; }
.cause-fix .fix .lbl { color:var(--teal); }
.cause-fix p { margin-bottom:0; font-size:0.87rem; }
@media(max-width:600px){ .cause-fix { grid-template-columns:1fr; } }

/* ---- Checklist ---- */
.checklist { list-style:none; margin:20px 0; padding:0; }
.checklist li { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--muted); }
.checklist li:last-child { border-bottom:none; }
.checklist .num { width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:0.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---- Timeline (lesson-plan style posts) ---- */
.timeline { border:1px solid var(--border); border-radius:14px; overflow:hidden; margin:24px 0; background:var(--card); }
.t-row { display:flex; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); align-items:flex-start; }
.t-row:last-child { border-bottom:none; }
.t-time { flex-shrink:0; width:78px; font-size:0.78rem; font-weight:700; color:var(--teal); padding-top:2px; }
.t-body h4 { font-size:0.92rem; font-weight:700; color:var(--white); margin-bottom:4px; }
.t-body p { font-size:0.85rem; color:var(--muted); margin-bottom:0; }

/* ---- Share row (end-of-post CTAs) ---- */
.share-row { display:flex; gap:12px; margin-top:36px; padding-top:24px; border-top:1px solid var(--border); flex-wrap:wrap; }

/* ---- Interactive demo panels (tutorial / debugging posts) ---- */
.demo-panel { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px; margin:26px 0; }
.demo-label { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.demo-preview { height:130px; border-radius:10px; margin-bottom:16px; transition:background 0.2s ease; }
.demo-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.demo-controls label { font-size:0.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.demo-controls input[type="range"] { flex:1; min-width:140px; accent-color:var(--accent); }
.demo-val { font-family:'Fira Code',Consolas,monospace; font-size:0.8rem; color:var(--accent); min-width:52px; }

.angle-btns, .mid-toggle-wrap, .demo-width-btns, .demo-toggle { display:flex; gap:6px; }
.angle-btns button, .mid-toggle-wrap button,
.demo-width-btns button, .demo-toggle button { background:var(--bg); border:1px solid var(--border); color:var(--muted); font-size:0.75rem; font-weight:700; padding:6px 14px; border-radius:6px; cursor:pointer; letter-spacing:0.04em; }
.angle-btns button.active, .mid-toggle-wrap button.active { border-color:var(--pink); color:var(--pink); background:rgba(249,115,22,0.12); }
.demo-width-btns button.active, .demo-toggle button.active { border-color:var(--teal); color:var(--teal); background:rgba(79,70,229,0.12); }

.demo-stage-wrap { border:1px dashed var(--border); border-radius:10px; padding:16px; overflow-x:auto; position:relative; transition:max-width 0.25s ease; }
.demo-stage { transition:width 0.2s ease; }
.demo-grid { display:grid; gap:12px; }
/* Fixed 3-column demo grid used by the gradients post */
.demo-grid.fixed-cols { grid-template-columns:1fr 1fr 1fr; }
.demo-card { background:#1E3A8A; border-radius:8px; padding:22px 8px; text-align:center; font-size:0.78rem; font-weight:600; color:#fff; }
/* Overflow-demo variant: cards that need to wrap/overflow their track */
.demo-card.wrap-text { padding:16px 10px; font-size:0.72rem; white-space:normal; overflow-wrap:break-word; transition:box-shadow 0.2s ease; }
.demo-card.culprit-text { white-space:nowrap; }
.demo-card.culprit-highlight { box-shadow:0 0 0 2px var(--pink); background:#5b2140; }
.demo-card.fixed-item { min-width:0; }
.demo-btn-row { display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.demo-btn-row button { background:var(--teal); border:none; color:#fff; font-size:0.8rem; font-weight:700; padding:9px 18px; border-radius:8px; cursor:pointer; }
.demo-btn-row button.reset-btn { background:transparent; border:1px solid var(--border); color:var(--muted); }
.demo-flag { font-size:0.78rem; color:var(--pink); font-weight:700; margin-top:12px; display:none; }
.demo-flag.show { display:block; }
.demo-code { background:#0a0f1a; border-radius:8px; padding:12px 16px; margin-top:14px; font-family:'Fira Code',Consolas,monospace; font-size:0.76rem; color:#A5B4FC; line-height:1.7; }
.demo-code.pre-wrap { white-space:pre-wrap; }
.demo-code.tight-top { margin-top:6px; }
/* Toggle-to-reveal code panel used by the overflow post */
.demo-code.toggle { margin-top:12px; display:none; }
.demo-code.toggle.show { display:block; }
.demo-caption { font-size:0.8rem; color:var(--muted); margin-top:14px; }

/* ---- Example visual panels ---- */
.ex-visual { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 22px; margin:24px 0; }
.ex-visual-label { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.ex-visual-note { font-size:0.8rem; color:var(--muted); margin-top:14px; }
.ex-lines { display:flex; justify-content:space-between; font-size:0.68rem; color:var(--muted); margin-bottom:6px; padding:0 4px; }
.ex-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ex-cell { background:#1E3A8A; border-radius:8px; padding:20px 0; text-align:center; font-size:0.82rem; font-weight:600; color:#fff; }
.ex-cell.span2 { grid-column:span 2; background:var(--teal); }
.ex-mini-row { display:flex; gap:16px; flex-wrap:wrap; }
.ex-mini { flex:1; min-width:130px; }
.ex-mini-label { font-size:0.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:8px; text-align:center; letter-spacing:0.05em; }
.ex-mini-grid { display:grid; gap:6px; }
.ex-mini-cell { background:var(--navy); border-radius:5px; height:26px; }
.ex-areas { display:grid; grid-template-columns:70px 1fr; grid-template-rows:32px 68px 32px; gap:6px; }
.ex-area { border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#fff; }
.ex-area.header, .ex-area.footer { grid-column:1/-1; background:#4338CA; }
.ex-area.sidebar { background:var(--purple); }
.ex-area.main { background:#1E3A8A; }
.ex-broken-wrap { background:#0a0f1a; border:1px dashed rgba(229,62,62,0.55); border-radius:8px; padding:16px; overflow-x:auto; }
.ex-broken { display:flex; gap:8px; width:max-content; }
.ex-broken-card { width:110px; height:64px; background:#1E3A8A; border-radius:6px; flex-shrink:0; }
.ex-broken-card.long { background:var(--pink); display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:#fff; padding:0 8px; text-align:center; }

.side-by-side { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:600px){ .side-by-side { grid-template-columns:1fr; } }
.sbs-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:8px; text-align:center; }
.sbs-box { border:1px solid var(--border); border-radius:8px; padding:10px; overflow-x:auto; }

.shrink-row { display:flex; gap:6px; width:200px; }
.shrink-cell { background:#1E3A8A; border-radius:5px; height:34px; flex:1; }
.shrink-cell.wide { flex:none; width:130px; background:var(--pink); }

.container-edge { position:relative; border:1px dashed rgba(229,62,62,0.6); border-radius:8px; padding:10px; width:180px; }
.track-block { background:var(--teal); border-radius:5px; height:34px; }
.track-block.overflow { width:210px; background:#dd6b20; }

.img-card { border:1px solid var(--border); border-radius:8px; padding:8px; width:140px; }
.img-block { background:linear-gradient(135deg,var(--navy),var(--purple)); border-radius:5px; height:60px; }
.img-block.wide { width:180px; }

.width-math { font-family:'Fira Code',Consolas,monospace; font-size:0.85rem; color:#A5B4FC; background:#0a0f1a; border-radius:8px; padding:14px 18px; margin:14px 0; }
.width-math .total { color:var(--pink); font-weight:700; }

.cramped-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:220px; }
.cramped-cell { background:#1E3A8A; border-radius:5px; height:34px; }
.fitcount-grid { display:grid; gap:6px; width:260px; }
.fitcount-cell { background:var(--navy); border-radius:5px; height:30px; }

.track-diagram { display:flex; align-items:center; height:34px; border-radius:6px; overflow:hidden; margin-top:8px; }
.track-diagram .min-part { background:var(--teal); display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:#fff; flex-shrink:0; width:90px; }
.track-diagram .grow-part { background:repeating-linear-gradient(45deg, rgba(79,70,229,0.35), rgba(79,70,229,0.35) 8px, rgba(79,70,229,0.15) 8px, rgba(79,70,229,0.15) 16px); flex:1; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:var(--muted); }

.fillfit-row { display:flex; gap:10px; }
.fillfit-col { flex:1; }
.fillfit-track { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; border:1px dashed var(--border); border-radius:8px; padding:8px; }
.fillfit-track.fit { grid-template-columns:1fr 1fr; }
.fillfit-cell { background:#1E3A8A; border-radius:5px; height:30px; }

.sidebar-demo { display:grid; grid-template-columns:90px 1fr; gap:8px; }
.sidebar-demo .sd-side { background:var(--purple); border-radius:6px; height:60px; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:#fff; }
.sidebar-demo .sd-main { background:#1E3A8A; border-radius:6px; height:60px; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:#fff; }

.fixed-track { display:flex; gap:6px; width:210px; }
.fixed-track div { background:#dd6b20; border-radius:5px; height:34px; flex:1; }
.flex-track { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:180px; }
.flex-track div { background:var(--teal); border-radius:5px; height:34px; }
.col-count-row { display:flex; gap:10px; }
.col-count-col { flex:1; }
.col-count-track { display:grid; gap:6px; border:1px dashed var(--border); border-radius:8px; padding:8px; }
.col-count-track.four { grid-template-columns:repeat(4,1fr); }
.col-count-track.autofit { grid-template-columns:1fr; }
.col-count-cell { background:#1E3A8A; border-radius:5px; height:26px; }
.gap-diagram { display:flex; align-items:center; gap:4px; }
.gap-col { background:#1E3A8A; border-radius:5px; height:34px; flex:1; }
.gap-space { background:repeating-linear-gradient(45deg, rgba(221,107,32,0.3), rgba(221,107,32,0.3) 6px, rgba(221,107,32,0.1) 6px, rgba(221,107,32,0.1) 12px); border-radius:3px; height:34px; }
.overflow-card { border:1px solid var(--border); border-radius:8px; padding:12px; position:relative; overflow-x:hidden; }
.overflow-row { display:flex; gap:8px; }
.overflow-item { background:#1E3A8A; border-radius:6px; width:70px; height:50px; flex-shrink:0; }
.overflow-item.wide { background:var(--pink); width:150px; display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:#fff; text-align:center; padding:0 6px; }
.overflow-flag { font-size:0.68rem; color:#dd6b20; font-weight:700; margin-top:8px; }

/* ---- Gradient tool demo & gallery (gradients post) ---- */
.angle-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:600px){ .angle-grid { grid-template-columns:repeat(2,1fr); } }
.angle-cell { height:60px; border-radius:8px; margin-bottom:6px; }
.hero-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:600px){ .hero-compare { grid-template-columns:1fr; } }
.mini-hero { border-radius:10px; padding:26px 18px; text-align:center; }
.mini-hero h4 { font-size:0.95rem; margin-bottom:10px; }
.mini-hero .mini-btn { display:inline-block; background:rgba(255,255,255,0.15); padding:5px 14px; border-radius:6px; font-size:0.72rem; font-weight:700; }
.gallery-item { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.gallery-preview { height:100px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.85); font-size:0.8rem; font-weight:700; }
.gallery-body { padding:14px 18px; }
.gallery-body h4 { font-size:0.92rem; color:var(--white); margin-bottom:6px; }
.gallery-body p { font-size:0.82rem; color:var(--muted); margin-bottom:8px; }
.gallery-body code { display:block; background:#0a0f1a; padding:8px 10px; border-radius:6px; font-size:0.72rem; margin-bottom:10px; white-space:pre-wrap; }

.swatch-pair { display:flex; gap:10px; }
.three-pairs { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:700px){ .three-pairs { grid-template-columns:1fr; } }
.pair-card { text-align:center; }
.pair-swatches { display:flex; justify-content:center; gap:6px; margin-bottom:8px; }
.pair-swatches div { width:22px; height:22px; border-radius:50%; border:2px solid var(--bg2); }
.pair-result { height:50px; border-radius:8px; margin-bottom:6px; }
.pair-label { font-size:0.7rem; color:var(--muted); }
.stops-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:700px){ .stops-row { grid-template-columns:1fr; } }
.stop-card .pair-result { height:44px; position:relative; }
.stop-marker { position:absolute; bottom:-6px; width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--bg); }


/* Small additions specific to the standalone analyzer layout */
  .detective-tool-section { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:70px 24px 80px; }
  .detective-tool-inner { max-width:760px; margin:0 auto; }
  .detective-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px; box-shadow:0 10px 34px rgba(0,0,0,0.35); }
  .detective-card h2 { font-size:1.3rem; font-weight:800; color:var(--white); margin-bottom:4px; }
  .detective-card .sub { font-size:0.88rem; color:var(--muted); margin-bottom:20px; }
  .analyzer-tab { border:none; cursor:pointer; }
  #analyze-input { font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; resize:vertical; }
  #line-nums { font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; border:1px solid var(--border); border-right:none; }
  .analyze-btn { background:var(--teal); border:none; color:#fff; font-weight:700; cursor:pointer; transition:background 0.15s; }
  .analyze-btn:hover { background:var(--teal-d); }
/* =========================================================
   CSS GRID GENERATOR — LANDING PAGE
   ========================================================= */

/* Alternating content bands (definition / intro copy blocks) */
.content-section { padding:80px 24px; }
.content-section.alt-bg2 { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.content-section.alt-bg3 { background:var(--bg3); border-top:1px solid var(--border); }
.content-inner { max-width:1200px; margin:0 auto; }
.content-narrow { max-width:820px; margin:0 auto; }
.content-narrow p { color:var(--muted); margin-bottom:16px; font-size:0.95rem; line-height:1.75; }
.content-narrow p:last-child { margin-bottom:0; }

/* 4-step "How it works" grid */
.steps-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:28px; }
.steps-grid-4 .step-card .step-num { margin:0 auto 14px; }
@media(max-width:900px){ .steps-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .steps-grid-4 { grid-template-columns:1fr; } }

/* Generator vs hand-written CSS comparison table */
.compare-table-wrap { margin-top:28px; overflow-x:auto; border:1px solid var(--border); border-radius:14px; }
.compare-table { width:100%; border-collapse:collapse; background:var(--card); min-width:600px; }
.compare-table th, .compare-table td { padding:14px 18px; text-align:left; font-size:0.87rem; border-bottom:1px solid var(--border); }
.compare-table th { color:var(--white); font-weight:700; background:var(--bg2); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }
.compare-table td { color:var(--muted); }
.compare-table td:first-child { color:var(--white); font-weight:600; white-space:nowrap; }
.compare-table tr:last-child td { border-bottom:none; }
.compare-note { margin-top:20px; font-size:0.9rem; color:var(--muted); background:rgba(79,70,229,0.08); border:1px solid rgba(79,70,229,0.25); border-radius:10px; padding:16px 20px; }
.compare-note strong { color:var(--white); }

/* Grid Detective mid-page callout */
.detective-callout { max-width:760px; margin:0 auto; text-align:center; background:rgba(96,165,250,0.1); border:1px solid rgba(96,165,250,0.25); border-radius:16px; padding:44px 36px; }
.detective-callout p { color:var(--muted); margin:14px 0 26px; font-size:0.95rem; }

/* FAQ accordion */
.faq-list { max-width:820px; margin:32px auto 0; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.faq-item summary { cursor:pointer; padding:18px 22px; font-size:0.95rem; font-weight:600; color:var(--white); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:1.3rem; color:var(--teal); font-weight:400; flex-shrink:0; transition:transform 0.2s; line-height:1; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item[open] summary { border-bottom:1px solid var(--border); }
.faq-answer { padding:4px 22px 20px; font-size:0.88rem; color:var(--muted); line-height:1.7; }

/* =========================================================
   CSS GRID CHEAT SHEET — PAGE
   ========================================================= */
.cheat-jump { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px; }
.cheat-jump a { font-size:0.78rem; font-weight:600; color:var(--muted); background:var(--card); border:1px solid var(--border); border-radius:20px; padding:7px 16px; transition:all 0.2s; text-decoration:none; }
.cheat-jump a:hover { color:var(--teal); border-color:var(--teal); text-decoration:none; }

.cheat-code-pre { padding:16px 18px; margin:0; font-size:0.78rem; color:#A5B4FC; line-height:1.7; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.cheat-code-label { font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); }

.pattern-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.pattern-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; }
.pattern-card h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:14px; }
.pattern-card p { font-size:0.85rem; color:var(--muted); margin-top:14px; line-height:1.6; }
@media(max-width:800px){ .pattern-grid { grid-template-columns:1fr; } }

.lang-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
@media(max-width:800px){ .lang-grid { grid-template-columns:1fr; } }

.fr-demo { max-width:420px; margin:24px auto 0; }
.fr-demo-caption { text-align:center; font-size:0.78rem; color:var(--muted); margin-top:10px; }

/* =========================================================
   DISPLAY:GRID GUIDE + CSS GRID LAYOUT GUIDE — PAGES
   ========================================================= */
.mistake-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.mistake-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 22px; display:flex; gap:14px; align-items:flex-start; }
.mistake-card-body h3 { font-size:0.95rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.mistake-card-body p { font-size:0.85rem; color:var(--muted); line-height:1.6; }
@media(max-width:800px){ .mistake-grid { grid-template-columns:1fr; } }

.mini-code-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0; }
.mini-code-grid .mini-code-label { font-size:0.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
@media(max-width:800px){ .mini-code-grid { grid-template-columns:1fr; } }

.code-caption { font-size:0.78rem; color:var(--muted); margin-top:10px; }

/* =========================================================
   LEARNING PATH PAGES (css, tailwind, scss, jscript) — level list
   ========================================================= */
.level-list { display:flex; flex-direction:column; gap:16px; margin:32px 0 8px; }
.level-item { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 26px; transition:all 0.2s; }
.level-item:not(.locked):hover { border-color:var(--teal); }
.level-item.locked { opacity:0.55; }
.level-item-head { display:flex; align-items:flex-start; gap:18px; }
.level-item-num { width:38px; height:38px; border-radius:50%; background:var(--teal); color:var(--white); font-weight:800; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.level-item.locked .level-item-num { background:rgba(255,255,255,0.08); color:var(--muted); }
.level-item-info { flex:1; }
.level-item-info h3 { font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.level-item-info p { font-size:0.88rem; color:var(--muted); margin-bottom:10px; }
.level-item-meta { font-size:0.78rem; color:var(--muted); }
.level-item-status { flex-shrink:0; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:6px 14px; border-radius:20px; white-space:nowrap; }
.status-soon { background:rgba(249,115,22,0.15); color:var(--pink); border:1px solid rgba(249,115,22,0.35); }
.status-locked { background:rgba(255,255,255,0.06); color:var(--muted); border:1px solid var(--border); }
.level-lessons { margin-top:20px; }
@media(max-width:600px){
  .level-item-head { flex-wrap:wrap; }
  .level-item-status { margin-left:56px; }
}