:root{--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-750: #1a2332;--slate-800: #1e293b;--slate-900: #0f172a;--slate-950: #020617;--white: #ffffff;--black: #000000;--ink-900: #030712;--ink-850: #0a0f1e;--ink-800: #0d1326;--ink-750: #050b18;--ink-700: #0b1220;--indigo-300: #c4b5fd;--indigo-400: #a78bfa;--indigo-500: #6366f1;--indigo-600: #8b5cf6;--indigo-700: #7c3aed;--indigo-800: #6d28d9;--indigo-900: #4c1d95;--indigo-100: #e0e7ff;--indigo-50: #ede9fe;--violet-200: #ddd6fe;--fuchsia-500: #c026d3;--fuchsia-300: #f0abfc;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--cyan-300: #7dd3fc;--cyan-500: #06b6d4;--cyan-600: #0891b2;--green-300: #86efac;--green-400: #34d399;--green-500: #22c55e;--green-600: #16a34a;--green-700: #15803d;--green-900: #14532d;--emerald-500: #10b981;--green-50: #dcfce7;--green-100: #d1fae5;--green-200: #a7f3d0;--amber-300: #fcd34d;--amber-400: #fbbf24;--amber-500: #f59e0b;--amber-600: #d97706;--amber-700: #b45309;--amber-900: #78350f;--amber-100: #fde68a;--amber-50: #fef3c7;--amber-25: #fffbeb;--red-300: #fca5a5;--red-400: #f87171;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-900: #7f1d1d;--red-100: #fecaca;--red-50: #fee2e2;--rose-50: #ffe4e6;--react-blue: #61dafb;--mongo-green: #13aa52;--bg: var(--white);--surface: var(--slate-50);--surface-2: var(--slate-100);--border: var(--slate-200);--border-strong: var(--slate-300);--hairline: var(--slate-200);--text: var(--slate-900);--text-secondary:var(--slate-500);--text-muted: var(--slate-400);--text-inverse: var(--white);--accent: var(--indigo-500);--accent-hover: var(--indigo-700);--accent-strong: var(--indigo-900);--accent-soft: var(--indigo-400);--accent-contrast: var(--white);--accent-tint: color-mix(in srgb, var(--accent) 8%, transparent);--accent-tint-strong: color-mix(in srgb, var(--accent) 15%, transparent);--accent-gradient: linear-gradient(135deg, var(--indigo-500) 0%, var(--fuchsia-500) 100%);--success: var(--green-500);--success-fg:var(--green-700);--success-bg:var(--green-50);--warning: var(--amber-400);--warning-fg:var(--amber-700);--warning-bg:var(--amber-50);--danger: var(--red-500);--danger-fg: var(--red-700);--danger-bg: var(--red-50);--info: var(--blue-500);--sl-color-accent-low: var(--indigo-50);--sl-color-accent: var(--accent);--sl-color-accent-high: var(--accent-strong);--sl-color-bg: var(--bg);--sl-color-bg-sidebar: var(--surface);--sl-color-bg-nav: var(--bg);--sl-color-hairline: var(--hairline);--app-bg: var(--bg);--app-surface: var(--surface);--app-border: var(--border);--app-text: var(--text);--app-text-secondary: var(--text-secondary);--app-accent: var(--accent);--app-accent-light: var(--accent-tint);--app-accent-gradient:var(--accent-gradient);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;--font-display: "Space Grotesk", "Inter", sans-serif;--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1rem;--fs-lg: 1.125rem;--fs-xl: 1.25rem;--fs-2xl: 1.5rem;--fs-3xl: 1.875rem;--fw-normal: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fw-extrabold: 800;--lh-tight: 1.2;--lh-snug: 1.5;--lh-normal:1.7;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-pill: 999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 20px 40px rgba(0, 0, 0, .3);--shadow-accent: 0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent);--z-nav: 1000;--z-dropdown: 1001;--z-overlay: 99999;--z-modal: 100000;--ease-out: cubic-bezier(.4, 0, .2, 1);--transition-fast: .15s ease;--transition-base: .25s var(--ease-out)}:root[data-theme=dark]{--bg: var(--slate-950);--surface: var(--slate-900);--surface-2: var(--ink-800);--border: var(--slate-800);--border-strong: var(--slate-700);--hairline: var(--slate-800);--text: var(--slate-100);--text-secondary:var(--slate-400);--text-muted: var(--slate-500);--accent: var(--indigo-600);--accent-hover: var(--indigo-400);--accent-strong: var(--violet-200);--accent-soft: var(--indigo-400);--accent-gradient: linear-gradient(135deg, var(--indigo-400) 0%, var(--fuchsia-300) 100%);--success-fg:var(--green-300);--success-bg:var(--green-900);--warning-fg:var(--amber-100);--warning-bg:var(--amber-900);--danger-fg: var(--red-300);--danger-bg: var(--red-900);--sl-color-accent-low: var(--indigo-900);--sl-color-accent: var(--accent);--sl-color-accent-high: var(--accent-strong)}body:has(.jsl-platform){overflow:hidden}.lab-hub-page{max-width:1200px}.lab-hero{position:relative;z-index:1;padding:4rem 0 2.5rem}.lab-stats-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:0;margin:0 0 1.5rem;padding:1.25rem 1.5rem;border-radius:1rem;border:1px solid rgba(255,255,255,.08);background:color-mix(in srgb,var(--slate-900) 35%,transparent);backdrop-filter:blur(12px)}.lab-stat-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:0 1.5rem}.lab-stat-value{font-size:1.35rem;font-weight:800;color:var(--slate-50)}.lab-stat-label{font-size:.72rem;font-weight:700;color:var(--slate-500);letter-spacing:.05em;text-transform:uppercase}.lab-stat-divider{width:1px;height:34px;background:#ffffff14}.quick-start-section{position:relative;z-index:2;margin-bottom:1.5rem;padding:.9rem 1.25rem;border-radius:.75rem;border:1px solid rgba(96,165,250,.16);background:linear-gradient(135deg,#60a5fa14,#2dd4bf08)}.quick-start-close{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:24px;height:24px;border-radius:.35rem;color:var(--slate-500)}.quick-start-close:hover{background:#ffffff0f;color:var(--slate-300)}.quick-start-content{display:flex;align-items:flex-start;gap:.75rem}.quick-start-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:.55rem;background:#60a5fa1f;color:var(--blue-400);flex-shrink:0}.quick-start-text strong{display:block;color:var(--slate-50);font-size:.9rem;margin-bottom:.2rem}.quick-start-text p{margin:0;color:var(--slate-400);font-size:.84rem;line-height:1.55}.lab-cards-section{position:relative;z-index:2;margin:2rem 0 4rem}.lab-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}.lab-card{position:relative;display:flex;flex-direction:column;min-height:390px;padding:1.4rem;border-radius:.9rem;border:1px solid rgba(255,255,255,.08);background:color-mix(in srgb,var(--slate-900) 38%,transparent);box-shadow:0 16px 45px #00000038;overflow:hidden;transition:transform .22s ease,border-color .22s ease,background .22s ease}.lab-card.ready{cursor:pointer}.lab-card.ready:hover,.lab-card.ready:focus-visible{transform:translateY(-4px);border-color:#60a5fa59;background:#1e293b8c;outline:none}.lab-card.coming-soon{opacity:.72}.lab-card-status{display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;padding:.18rem .5rem;border-radius:999px;background:#ffffff0a;font-size:.72rem;font-weight:700}.lab-status-dot{width:7px;height:7px;border-radius:50%}.lab-card-icon{display:grid;place-items:center;width:54px;height:54px;margin:1.1rem 0 1rem;border:1px solid;border-radius:.85rem}.lab-icon-text{font-weight:900;font-size:.92rem;letter-spacing:0}.lab-card-title{margin:0 0 .55rem;color:var(--slate-50);font-size:1.15rem;line-height:1.25}.lab-card-desc{margin:0 0 1rem;color:var(--slate-400);font-size:.88rem;line-height:1.65}.lab-card-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.85rem}.lab-diff-badge{padding:.15rem .5rem;border-radius:999px;border:1px solid;font-size:.68rem;font-weight:700}.lab-challenge-count{color:var(--slate-500);font-size:.74rem;font-weight:600}.lab-card-features{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto}.lab-feature-chip{padding:.25rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.07);background:#ffffff09;color:var(--slate-300);font-size:.7rem;font-weight:600}.lab-feature-more{color:var(--slate-500)}.lab-card-action{margin-top:1.2rem}.lab-action-btn,.lab-action-soon{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue-400);font-size:.86rem;font-weight:800}.lab-action-soon{color:var(--slate-500)}.lab-action-arrow{transition:transform .18s ease}.lab-card.ready:hover .lab-action-arrow{transform:translate(3px)}@media(max-width:768px){body:has(.jsl-platform){overflow:auto}.lab-hub-page{padding:0 1rem}.lab-stats-bar{flex-wrap:wrap;gap:.5rem;padding:1rem}.lab-stat-item{padding:0 .75rem}.lab-stat-divider{display:none}.lab-cards-grid{grid-template-columns:1fr}}
