:root {
	--sh-navy: #050b1f;
	--sh-navy-2: #0b1235;
	--sh-purple: #7c3aed;
	--sh-blue: #2563eb;
	--sh-cyan: #06b6d4;
	--sh-text: #0f172a;
	--sh-muted: #64748b;
	--sh-border: #e2e8f0;
	--sh-surface: #ffffff;
	--sh-bg: #f8fafc;
	--sh-radius: 14px;
	--sh-container: 1180px;
}

.sh-site {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--sh-text);
	background: var(--sh-bg);
	line-height: 1.6;
}

.sh-site *, .sh-site *::before, .sh-site *::after { box-sizing: border-box; }
.sh-site a { text-decoration: none; }
.sh-container { width: min(calc(100% - 40px), var(--sh-container)); margin: 0 auto; }

/* Header */
.sh-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(5, 11, 31, .96);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.sh-header.is-scrolled { box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.sh-header-inner { min-height: 74px; display:flex; align-items:center; gap:28px; }
.sh-brand { display:flex; align-items:center; gap:10px; color:#fff; min-width:max-content; }
.sh-brand-mark {
	width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
	background: linear-gradient(135deg, #3b82f6, #8b5cf6);
	font-weight:900; font-size:20px;
	box-shadow: 0 8px 25px rgba(59,130,246,.25);
}
.sh-brand-text { display:flex; flex-direction:column; line-height:1.05; }
.sh-brand-text strong { font-size:18px; letter-spacing:-.02em; }
.sh-brand-text small { color:#94a3b8; font-size:9px; margin-top:5px; letter-spacing:.02em; }
.sh-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.sh-nav a { color:#cbd5e1; padding:10px 10px; border-radius:8px; font-size:14px; font-weight:600; }
.sh-nav a:hover { color:#fff; background:rgba(255,255,255,.06); }
.sh-header-search { display:flex; width:210px; border:1px solid rgba(255,255,255,.13); border-radius:9px; overflow:hidden; background:rgba(255,255,255,.05); }
.sh-header-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#fff; padding:10px 12px; font-size:13px; }
.sh-header-search input::placeholder { color:#64748b; }
.sh-header-search button { width:40px; border:0; background:transparent; color:#94a3b8; font-size:19px; cursor:pointer; }
.sh-menu-toggle { display:none; margin-left:auto; border:0; background:transparent; color:#fff; font-size:24px; }

/* Hero */
.sh-hero {
	position:relative; overflow:hidden; color:#fff;
	background:
		radial-gradient(circle at 78% 22%, rgba(124,58,237,.28), transparent 28%),
		radial-gradient(circle at 15% 85%, rgba(37,99,235,.2), transparent 30%),
		linear-gradient(135deg, #050b1f 0%, #0b1235 58%, #26105a 100%);
}
.sh-hero::before {
	content:""; position:absolute; inset:0; opacity:.25; pointer-events:none;
	background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
	background-size:24px 24px;
	mask-image: linear-gradient(to bottom, black, transparent);
}
.sh-hero-grid { min-height:600px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; position:relative; z-index:1; padding:80px 0; }
.sh-eyebrow, .sh-kicker { color:#60a5fa; font-size:11px; font-weight:800; letter-spacing:.16em; }
.sh-hero h1 { font-size:clamp(48px, 6vw, 76px); line-height:.98; letter-spacing:-.055em; margin:16px 0 24px; font-weight:850; }
.sh-hero h1 span { background:linear-gradient(90deg,#60a5fa,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sh-hero-copy > p { max-width:620px; color:#cbd5e1; font-size:18px; line-height:1.75; margin:0 0 28px; }
.sh-hero-search { display:flex; max-width:620px; padding:5px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); border-radius:12px; box-shadow:0 18px 55px rgba(0,0,0,.22); }
.sh-hero-search span { display:grid; place-items:center; width:48px; color:#94a3b8; font-size:22px; }
.sh-hero-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#fff; font-size:15px; }
.sh-hero-search input::placeholder { color:#94a3b8; }
.sh-hero-search button { border:0; border-radius:8px; background:#2563eb; color:#fff; padding:0 20px; font-weight:800; cursor:pointer; }
.sh-popular { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; color:#94a3b8; font-size:12px; }
.sh-popular a { color:#cbd5e1; border:1px solid rgba(255,255,255,.1); padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.04); }
.sh-popular a:hover { color:#fff; border-color:rgba(96,165,250,.4); }

/* Code preview */
.sh-code-window { border:1px solid rgba(255,255,255,.13); background:#081022; border-radius:18px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.4); transform:rotate(.5deg); }
.sh-window-bar { height:48px; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.08); color:#64748b; font-size:12px; }
.sh-window-dots { display:flex; gap:6px; }
.sh-window-dots i { width:9px; height:9px; border-radius:50%; background:#334155; }
.sh-code-body { padding:22px 20px; font:14px/2 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color:#cbd5e1; min-height:315px; }
.sh-code-line { display:grid; grid-template-columns:30px 1fr; }
.sh-code-line em { color:#334155; font-style:normal; user-select:none; }
.sh-code-line b { color:#c084fc; }
.sh-code-line mark { color:#67e8f9; background:transparent; }
.sh-code-status { padding:10px 18px; border-top:1px solid rgba(255,255,255,.07); color:#64748b; font-size:11px; }
.sh-code-status span { display:inline-block; width:7px; height:7px; border-radius:50%; background:#22c55e; margin-right:7px; }

/* Sections */
.sh-section { padding:90px 0; background:#fff; }
.sh-soft-section { background:#f8fafc; }
.sh-section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
.sh-section-heading h2 { margin:5px 0 0; font-size:36px; line-height:1.1; letter-spacing:-.04em; }
.sh-section-heading > p { color:var(--sh-muted); margin:0; max-width:480px; }
.sh-view-all { color:var(--sh-blue); font-weight:800; font-size:14px; white-space:nowrap; }
.sh-category-section { padding-top:70px; }
.sh-category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.sh-category-card {
	display:block; padding:22px; border:1px solid var(--sh-border); border-radius:14px; background:#fff;
	box-shadow:0 8px 25px rgba(15,23,42,.04); color:var(--sh-text); transition:.2s;
}
.sh-category-card:hover { transform:translateY(-4px); border-color:#bfdbfe; box-shadow:0 16px 40px rgba(37,99,235,.1); }
.sh-cat-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:#eff6ff; color:#2563eb; font-size:21px; margin-bottom:16px; }
.sh-category-card strong { display:block; font-size:16px; }
.sh-category-card p { color:var(--sh-muted); font-size:13px; line-height:1.55; min-height:60px; margin:8px 0 12px; }
.sh-category-card b { color:var(--sh-blue); font-size:12px; }

/* Cards */
.sh-card-grid, .sh-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.sh-project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.sh-card { background:#fff; border:1px solid var(--sh-border); border-radius:14px; overflow:hidden; box-shadow:0 8px 30px rgba(15,23,42,.05); transition:.2s; }
.sh-card:hover { transform:translateY(-4px); box-shadow:0 18px 45px rgba(15,23,42,.1); border-color:#cbd5e1; }
.sh-card-image { display:block; aspect-ratio:16/9; background:#eef2ff; overflow:hidden; }
.sh-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.sh-card:hover .sh-card-image img { transform:scale(1.03); }
.sh-card-icon { display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; background:linear-gradient(135deg,#eef2ff,#f5f3ff); font-size:46px; }
.sh-card-body { padding:20px; }
.sh-card-body h3 { margin:0 0 8px; font-size:19px; line-height:1.25; }
.sh-card-body h3 a { color:var(--sh-text); }
.sh-card-body p { color:var(--sh-muted); margin:0 0 17px; line-height:1.6; font-size:14px; }
.sh-card-link { color:var(--sh-blue); font-weight:800; font-size:13px; }
.sh-badge { display:inline-block; margin-bottom:9px; padding:4px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:800; }

/* Resource panels */
.sh-resource-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.sh-resource-panel { background:#fff; border:1px solid var(--sh-border); border-radius:18px; padding:28px; }
.sh-resource-panel-head { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.sh-resource-panel-head > div { display:flex; align-items:center; gap:12px; }
.sh-resource-panel-head h3 { margin:0; font-size:24px; }
.sh-resource-panel-head a { color:var(--sh-blue); font-weight:800; font-size:13px; }
.sh-panel-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:#eef2ff; color:#4f46e5; }
.sh-resource-panel > p { color:var(--sh-muted); margin:12px 0 20px; }
.sh-resource-panel .sh-card-grid { grid-template-columns:1fr 1fr; gap:14px; }
.sh-resource-panel .sh-card-body { padding:16px; }
.sh-resource-panel .sh-card-body h3 { font-size:16px; }

/* Tutorials */
.sh-tutorial-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sh-tutorial-card { border:1px solid var(--sh-border); border-radius:14px; overflow:hidden; background:#fff; }
.sh-tutorial-image { display:block; aspect-ratio:16/9; background:#e2e8f0; overflow:hidden; }
.sh-tutorial-image img { width:100%; height:100%; object-fit:cover; display:block; }
.sh-tutorial-body { padding:18px; }
.sh-tutorial-body > span { color:var(--sh-blue); font-size:11px; font-weight:800; }
.sh-tutorial-body h3 { font-size:18px; line-height:1.3; margin:8px 0; }
.sh-tutorial-body h3 a { color:var(--sh-text); }
.sh-tutorial-body p { color:var(--sh-muted); font-size:13px; }
.sh-tutorial-body > a { color:var(--sh-blue); font-weight:800; font-size:13px; }

/* CTA/footer */
.sh-cta { padding:72px 0; color:#fff; background:linear-gradient(135deg,#0b1235,#26105a); }
.sh-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.sh-cta h2 { margin:6px 0 8px; font-size:40px; letter-spacing:-.04em; }
.sh-cta p { color:#cbd5e1; margin:0; max-width:620px; }
.sh-button { display:inline-flex; align-items:center; justify-content:center; padding:13px 19px; border-radius:9px; font-weight:800; }
.sh-button-light { background:#fff; color:#1d4ed8; white-space:nowrap; }
.sh-footer { background:#050b1f; color:#cbd5e1; padding:65px 0 20px; }
.sh-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; }
.sh-footer .sh-brand { margin-bottom:18px; }
.sh-footer-brand p { max-width:340px; color:#64748b; font-size:13px; line-height:1.7; }
.sh-footer h4 { color:#fff; margin:0 0 15px; font-size:13px; }
.sh-footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:9px; }
.sh-footer-grid > div:not(:first-child) a { color:#64748b; font-size:13px; }
.sh-footer-grid > div:not(:first-child) a:hover { color:#fff; }
.sh-footer-bottom { margin-top:55px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:20px; color:#475569; font-size:11px; }

/* Empty */
.sh-empty { padding:28px; border:1px dashed var(--sh-border); border-radius:14px; background:#fff; color:var(--sh-muted); }
.sh-full { grid-column:1/-1; }

/* Responsive */
@media (max-width:1100px) {
	.sh-category-grid { grid-template-columns:repeat(3,1fr); }
	.sh-project-grid { grid-template-columns:repeat(2,1fr); }
	.sh-tutorial-grid { grid-template-columns:repeat(2,1fr); }
	.sh-header-search { width:170px; }
	.sh-nav { gap:0; }
}
@media (max-width:900px) {
	.sh-menu-toggle { display:block; }
	.sh-nav { display:none; position:absolute; top:74px; left:20px; right:20px; padding:10px; flex-direction:column; align-items:stretch; background:#071025; border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
	.sh-nav.is-open { display:flex; }
	.sh-nav a { padding:12px; }
	.sh-header-search { display:none; }
	.sh-hero-grid { grid-template-columns:1fr; gap:40px; min-height:auto; padding:70px 0; }
	.sh-code-window { max-width:720px; width:100%; }
	.sh-card-grid { grid-template-columns:repeat(2,1fr); }
	.sh-footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
	.sh-container { width:min(calc(100% - 28px),var(--sh-container)); }
	.sh-brand-text small { display:none; }
	.sh-hero { min-height:auto; }
	.sh-hero-grid { padding:58px 0; }
	.sh-hero h1 { font-size:48px; }
	.sh-hero-copy > p { font-size:16px; }
	.sh-hero-search button { padding:0 13px; }
	.sh-popular { align-items:flex-start; }
	.sh-category-grid, .sh-card-grid, .sh-project-grid, .sh-tutorial-grid, .sh-resource-columns { grid-template-columns:1fr; }
	.sh-section { padding:65px 0; }
	.sh-section-heading { display:block; }
	.sh-section-heading h2 { font-size:30px; }
	.sh-section-heading > p { margin-top:12px; }
	.sh-view-all { display:inline-block; margin-top:12px; }
	.sh-resource-panel .sh-card-grid { grid-template-columns:1fr; }
	.sh-cta-inner { display:block; }
	.sh-cta h2 { font-size:32px; }
	.sh-button { margin-top:24px; }
	.sh-footer-grid { grid-template-columns:1fr 1fr; gap:32px 20px; }
	.sh-footer-brand { grid-column:1/-1; }
	.sh-footer-bottom { display:block; }
	.sh-footer-bottom span { display:block; margin-top:6px; }
}

.sh-card-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sh-download-button {
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	padding:8px 11px; border-radius:8px; background:#0f172a; color:#fff;
	font-size:12px; font-weight:800; border:1px solid #0f172a; cursor:pointer;
}
.sh-download-button:hover { background:#1e293b; color:#fff; }
.sh-download-button.is-loading { opacity:.85; cursor:wait; }
.sh-download-spinner {
	display:none; width:12px; height:12px; border:2px solid rgba(255,255,255,.35);
	border-top-color:#fff; border-radius:50%; animation:sh-spin .7s linear infinite;
}
.sh-download-button.is-loading .sh-download-spinner { display:inline-block; }
@keyframes sh-spin { to { transform:rotate(360deg); } }

.sh-download-overlay {
	position:fixed; inset:0; z-index:99999; display:none; place-items:center;
	background:rgba(2,6,23,.72); backdrop-filter:blur(5px); padding:20px;
}
.sh-download-overlay.is-visible { display:grid; }
.sh-download-modal {
	width:min(420px,100%); padding:30px; border-radius:18px; background:#fff;
	text-align:center; box-shadow:0 30px 100px rgba(0,0,0,.35);
}
.sh-download-modal-spinner {
	width:44px; height:44px; margin:0 auto 18px; border:4px solid #e2e8f0;
	border-top-color:#2563eb; border-radius:50%; animation:sh-spin .8s linear infinite;
}
.sh-download-modal h3 { margin:0 0 8px; color:#0f172a; font-size:21px; }
.sh-download-modal p { margin:0; color:#64748b; font-size:14px; }
.sh-download-progress { height:6px; margin:20px 0 0; overflow:hidden; border-radius:999px; background:#e2e8f0; }
.sh-download-progress span { display:block; width:0; height:100%; background:#2563eb; transition:width .1s linear; }


/* Shared SkillHost page layout */
.sh-page-shell { min-height: 55vh; background: var(--sh-bg); padding: 65px 0 85px; }
.sh-content-wrap > h1 { margin: 7px 0 16px; font-size: clamp(36px, 5vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.sh-content-wrap > p { color: var(--sh-muted); max-width: 760px; }
.sh-content-list { max-width: 900px; margin-top: 35px; }
.sh-content-card { background:#fff; border:1px solid var(--sh-border); border-radius:16px; overflow:hidden; margin-bottom:24px; box-shadow:0 10px 35px rgba(15,23,42,.05); }
.sh-content-thumb img { display:block; width:100%; height:auto; }
.sh-content-card-body { padding:28px; }
.sh-content-meta { color:#94a3b8; font-size:12px; margin-bottom:12px; }
.sh-content-card h2 { margin:0 0 12px; font-size:28px; line-height:1.2; }
.sh-content-card h2 a { color:var(--sh-text); }
.sh-entry-content, .sh-entry-excerpt { color:#475569; line-height:1.8; }
.sh-entry-content img { max-width:100%; height:auto; }
.sh-entry-content h2, .sh-entry-content h3 { color:var(--sh-text); margin-top:30px; }
.sh-page-cta { display:inline-block; margin-top:20px; }
@media(max-width:700px){ .sh-page-shell{padding:42px 0 60px}.sh-content-card-body{padding:21px}.sh-content-card h2{font-size:23px} }


/* -------------------------------------------------------------------------
   SkillHost frontend isolation
   The plugin renders its own site chrome, so theme CSS must not restyle it.
   ------------------------------------------------------------------------- */
.sh-site,
.sh-site *,
.sh-site *::before,
.sh-site *::after {
	box-sizing: border-box;
}

.sh-site {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--sh-text);
	background: var(--sh-bg);
	line-height: 1.6;
	text-align: left;
}

.sh-site h1,
.sh-site h2,
.sh-site h3,
.sh-site h4,
.sh-site h5,
.sh-site h6,
.sh-site p,
.sh-site ul,
.sh-site ol {
	margin-top: 0;
}

.sh-site img {
	max-width: 100%;
	height: auto;
}

.sh-site button,
.sh-site input,
.sh-site textarea,
.sh-site select {
	font: inherit;
}

.sh-site button {
	cursor: pointer;
}

.sh-site a {
	color: inherit;
}

.sh-site main {
	display: block;
	width: 100%;
}

.sh-site .sh-container {
	width: min(calc(100% - 40px), var(--sh-container));
	max-width: var(--sh-container);
	margin-left: auto;
	margin-right: auto;
}

.sh-site .sh-header,
.sh-site .sh-footer {
	width: 100%;
}

.sh-site .sh-header {
	position: sticky;
	top: 0;
	z-index: 9999;
}

.sh-site .sh-footer {
	clear: both;
}

/* Protect the JSON editor from theme textarea/button rules. */
.sh-site .sh-json-workspace textarea {
	box-sizing: border-box;
	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
	line-height: 1.7;
}

.sh-site .sh-page-shell {
	width: 100%;
	min-height: 55vh;
	padding: 64px 0 90px;
	background: var(--sh-bg);
}
.sh-site .sh-content-wrap {
	max-width: 980px;
}
.sh-site .sh-content-wrap > h1 {
	margin: 8px 0 18px;
	font-size: clamp(34px,5vw,56px);
	line-height: 1.05;
	letter-spacing: -.04em;
}

/* v1.3.4: protect SkillHost header branding from theme link-color rules */
.sh-site .sh-header .sh-brand,
.sh-site .sh-header .sh-brand:link,
.sh-site .sh-header .sh-brand:visited,
.sh-site .sh-header .sh-brand:hover,
.sh-site .sh-header .sh-brand:focus,
.sh-site .sh-header .sh-brand:active {
	color: #ffffff !important;
	text-decoration: none !important;
}

.sh-site .sh-header .sh-brand strong,
.sh-site .sh-header .sh-brand span,
.sh-site .sh-header .sh-brand * {
	color: inherit !important;
	text-decoration: none !important;
}

/* v1.3.5: explicit CTA button colors after the global SkillHost link reset */
.sh-site a.sh-button,
.sh-site a.sh-button:link,
.sh-site a.sh-button:visited,
.sh-site a.sh-button:hover,
.sh-site a.sh-button:focus,
.sh-site a.sh-button:active {
	text-decoration: none !important;
}

.sh-site a.sh-button.sh-button-light,
.sh-site a.sh-button.sh-button-light:link,
.sh-site a.sh-button.sh-button-light:visited {
	background: #ffffff !important;
	color: #1d4ed8 !important;
}

.sh-site a.sh-button.sh-button-light:hover,
.sh-site a.sh-button.sh-button-light:focus {
	background: #eff6ff !important;
	color: #1d4ed8 !important;
}

/* Keep the header brand white after global link inheritance. */
.sh-site .sh-header a.sh-brand,
.sh-site .sh-header a.sh-brand:link,
.sh-site .sh-header a.sh-brand:visited,
.sh-site .sh-header a.sh-brand:hover,
.sh-site .sh-header a.sh-brand:focus {
	color: #ffffff !important;
}

/* v1.3.9: protect header navigation text from WordPress theme link colors */
.sh-site .sh-header .sh-nav a,
.sh-site .sh-header .sh-nav a:link,
.sh-site .sh-header .sh-nav a:visited {
	color: #cbd5e1 !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.sh-site .sh-header .sh-nav a:hover,
.sh-site .sh-header .sh-nav a:focus,
.sh-site .sh-header .sh-nav a:active {
	color: #ffffff !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Search input/button in the header should also remain visible */
.sh-site .sh-header .sh-header-search input,
.sh-site .sh-header .sh-header-search input:focus {
	color: #0f172a !important;
	background: #ffffff !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.sh-site .sh-header .sh-header-search button,
.sh-site .sh-header .sh-header-search button:hover,
.sh-site .sh-header .sh-header-search button:focus {
	color: #ffffff !important;
	opacity: 1 !important;
	visibility: visible !important;
}