:root{--color-bg-primary:#090b0f;--color-bg-secondary:#11141a;--color-bg-tertiary:#171b23;--color-surface:#151922;--color-surface-hover:#1b202b;--color-surface-active:#202636;--color-border:#ffffff14;--color-border-strong:#ffffff24;--color-text-primary:#fff;--color-text-secondary:#a7adba;--color-text-muted:#707785;--color-primary:#7c8cff;--color-primary-hover:#8d70ff;--color-primary-soft:#7c5cff24;--color-accent-blue:#4f8cff;--color-accent-purple:#8b5cf6;--color-success:#34d399;--color-warning:#fbbf24;--color-danger:#f87171;--font-family-base:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.7;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-full:9999px;--shadow-sm:0 2px 8px #0000002e;--shadow-md:0 8px 24px #0000003d;--shadow-lg:0 16px 40px #00000052;--sidebar-width:250px;--topbar-height:72px;--content-max-width:1400px;--breakpoint-mobile:768px;--breakpoint-tablet:1024px;--breakpoint-desktop:1200px}*{box-sizing:border-box}html{background:var(--color-bg-primary);scroll-behavior:smooth;min-width:320px}body{background:var(--color-bg-primary);min-width:320px;min-height:100vh;color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-md);line-height:var(--line-height-normal);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}input,textarea,select{color:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}ul,ol{margin:0;padding:0;list-style:none}h1,h2,h3,h4,h5,h6,p{margin-top:0}::selection{background:var(--color-primary);color:#fff}.app-layout{min-height:100vh}.main-content{max-width:1450px;margin-left:230px;padding:110px 55px 70px}@media (width<=750px){.main-content{margin-left:0;padding:95px 17px 100px}}.topbar{height:var(--topbar-height);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#0b0d10f0;align-items:center;padding:0 28px;display:flex;position:fixed;top:0;left:0;right:0}.brand{width:230px;font-weight:var(--font-weight-bold);align-items:center;gap:11px;display:flex}.brand-mark{border-radius:var(--radius-md);background:var(--color-primary);color:#fff;width:34px;height:34px;font-weight:var(--font-weight-bold);place-items:center;display:grid}.header-search{flex:1;max-width:560px}.header-search input{background:var(--color-surface);border:1px solid var(--color-border);width:100%;color:var(--color-text-primary);border-radius:12px;outline:none;padding:12px 18px}.header-search input::placeholder{color:var(--color-text-muted)}.header-search input:focus{border-color:var(--color-primary)}.header-actions{align-items:center;gap:16px;margin-left:auto;display:flex}.icon-button{width:40px;height:40px;color:var(--color-text-secondary);border-radius:var(--radius-md);background:0 0;place-items:center;display:grid;position:relative}.icon-button:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.notification-dot{background:var(--color-danger);border-radius:50%;width:7px;height:7px;position:absolute;top:8px;right:8px}.profile-mini{background:0 0;padding:0}.avatar{background:var(--color-surface-tertiary,var(--color-bg-tertiary));border:1px solid var(--color-border);color:#fff;width:38px;height:38px;font-weight:var(--font-weight-bold);border-radius:50%;place-items:center;display:grid}.sidebar{top:var(--topbar-height);background:var(--color-surface);border-right:1px solid var(--color-border);z-index:50;width:230px;padding:25px 15px;position:fixed;bottom:0;left:0}.nav-section{flex-direction:column;gap:5px;display:flex}.nav-item{width:100%;color:var(--color-text-muted);border-radius:var(--radius-md);text-align:left;background:0 0;align-items:center;gap:13px;padding:12px 14px;transition:background .2s,color .2s;display:flex}.nav-item:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.nav-item.active{background:var(--color-surface-active);color:var(--color-text-primary)}.nav-item span:first-child{text-align:center;width:20px}.nav-divider{background:var(--color-border);height:1px;margin:20px 5px}.sidebar-bottom{border-top:1px solid var(--color-border);padding-top:15px;position:absolute;bottom:25px;left:15px;right:15px}.mobile-nav{display:none}@media (width<=750px){.topbar{height:64px;padding:0 16px}.brand{width:auto}.brand>span,.header-search,.sidebar{display:none}.mobile-nav{border:1px solid var(--color-border);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:200;background:#101319f5;height:65px;padding:5px;display:flex;position:fixed;bottom:10px;left:10px;right:10px}.mobile-nav-item{color:var(--color-text-muted);background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;display:flex}.mobile-nav-item.active{color:var(--color-primary)}.mobile-nav-item span{font-size:18px}.mobile-nav-item small{font-size:9px}}.page-header{max-width:800px;margin-bottom:45px}.eyebrow{color:var(--color-primary);letter-spacing:.13em;margin-bottom:10px;font-size:11px;font-weight:800;display:inline-block}.page-header h1{letter-spacing:-1.8px;margin:0;font-size:clamp(34px,4vw,58px);line-height:1.05}.page-header h1 span{color:var(--color-primary)}.page-header p{max-width:650px;color:var(--color-text-secondary);margin-top:18px;margin-bottom:0;font-size:16px;line-height:1.7}.primary-button{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-weight:var(--font-weight-bold);padding:12px 20px;transition:background .2s,transform .2s}.primary-button:hover{background:var(--color-primary-hover);transform:translateY(-1px)}.primary-button:focus-visible,.text-button:focus-visible,.save-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.primary-button.full{width:100%}.text-button{color:var(--color-primary);font-weight:var(--font-weight-bold);background:0 0}.progress-banner{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;margin-bottom:55px;padding:30px;display:flex}.small-label{letter-spacing:.12em;color:var(--color-text-muted);font-size:10px;font-weight:800}.progress-banner h2{margin:8px 0}.progress-banner p{color:var(--color-text-secondary);margin:0}.progress-circle{border:5px solid var(--color-primary);border-radius:50%;flex:none;place-items:center;width:82px;height:82px;font-size:16px;display:grid}.section-heading{justify-content:space-between;align-items:flex-end;margin-bottom:20px;display:flex}.section-heading h2{margin:0}.content-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.knowledge-card,.challenge-preview{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:23px}.knowledge-card{flex-direction:column;display:flex}.card-top{justify-content:space-between;align-items:center;display:flex}.category{border-radius:var(--radius-sm);background:var(--color-surface-active);color:var(--color-primary);letter-spacing:.08em;padding:6px 9px;font-size:10px;font-weight:800;display:inline-block}.save-button{color:var(--color-text-muted);background:0 0;font-size:20px}.save-button.saved{color:var(--color-primary)}.knowledge-card h3{margin:20px 0 12px;font-size:21px;line-height:1.25}.knowledge-card p,.challenge-preview p{color:var(--color-text-secondary);font-size:14px;line-height:1.6}.creator{align-items:center;gap:10px;margin-top:22px;display:flex}.creator div{flex-direction:column;display:flex}.creator strong{font-size:13px}.creator span{color:var(--color-text-muted);font-size:11px}.avatar.small{background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:#fff;width:34px;height:34px;font-size:13px;font-weight:var(--font-weight-bold);border-radius:50%;flex:none;place-items:center;display:grid}.card-footer{color:var(--color-text-muted);flex-wrap:wrap;gap:10px;margin:20px 0;font-size:11px;display:flex}.challenge-preview{background:linear-gradient(145deg, var(--color-surface-hover), var(--color-surface));flex-direction:column;justify-content:center;display:flex}.challenge-preview h3{margin-bottom:0;font-size:25px;line-height:1.25}.challenge-stats{color:var(--color-text-muted);gap:15px;margin:10px 0 25px;font-size:12px;display:flex}@media (width<=1000px){.content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.challenge-preview{grid-column:span 2}}@media (width<=750px){.page-header{margin-bottom:35px}.page-header h1{font-size:clamp(34px,9vw,46px)}.progress-banner{align-items:flex-start;gap:20px;margin-bottom:40px;padding:22px}.progress-banner h2{font-size:20px}.progress-circle{border-width:4px;width:70px;height:70px;font-size:14px}.section-heading{align-items:center}.section-heading h2{font-size:21px}.content-grid{grid-template-columns:1fr}.challenge-preview{grid-column:auto}}.explore-page{width:100%}.explore-page .page-header{margin-bottom:42px}.explore-page .page-header h1{max-width:760px}.explore-page .page-header p{max-width:680px}.search-large{gap:10px;width:100%;max-width:850px;margin-bottom:50px;display:flex}.search-large input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:0;color:var(--color-text-primary);outline:none;flex:1;padding:15px 18px}.search-large input::placeholder{color:var(--color-text-muted)}.search-large input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.search-large .primary-button{flex-shrink:0}.explore-page .section-heading{margin-bottom:22px}.categories-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.category-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:left;min-height:120px;color:var(--color-text-primary);flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:18px;transition:border-color .2s,background .2s,transform .2s;display:flex}.category-card:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-2px)}.category-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.category-card strong{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);display:block}.category-card span{color:var(--color-text-muted);font-size:var(--font-size-xs);margin-top:10px;display:block}.explore-selection{color:var(--color-text-secondary);margin-top:-32px;margin-bottom:32px}.explore-selection strong{color:var(--color-primary)}@media (width<=1100px){.categories-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=750px){.explore-page .page-header{margin-bottom:32px}.search-large{flex-direction:column;max-width:none;margin-bottom:38px}.search-large input,.search-large .primary-button{width:100%}.categories-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-card{min-height:110px;padding:15px}}@media (width<=480px){.categories-grid{grid-template-columns:1fr}}.challenges-page{width:100%}.challenges-page .page-header{margin-bottom:35px}.challenge-main{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);max-width:800px;padding:35px}.challenge-main h2{margin:25px 0;font-size:30px;line-height:1.3}.category{border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-hover);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;align-items:center;padding:6px 10px;display:inline-flex}.answers{gap:10px;margin-bottom:25px;display:grid}.answer{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text-primary);text-align:left;padding:17px;transition:background .2s,border-color .2s,transform .2s}.answer:hover{border-color:var(--color-primary);transform:translateY(-1px)}.answer.selected{background:var(--color-primary-soft);border-color:var(--color-primary)}.answer:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.primary-button{background:var(--color-primary);border-radius:var(--radius-md);color:#fff;font-weight:var(--font-weight-semibold);padding:12px 18px;transition:background .2s,transform .2s}.primary-button:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;opacity:.5}.challenge-modal-backdrop{z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000b8;justify-content:center;align-items:center;padding:24px;animation:.25s ease-out challenge-backdrop-in;display:flex;position:fixed;inset:0}.challenge-modal{background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);width:min(100%,520px);max-height:calc(100vh - 48px);box-shadow:var(--shadow-lg);text-align:center;padding:38px;animation:.35s ease-out challenge-modal-in;position:relative;overflow-y:auto}.challenge-modal.success{border-color:#34d39947}.challenge-modal.error{border-color:#7c8cff47}.challenge-modal-close{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-full);width:36px;height:36px;color:var(--color-text-secondary);justify-content:center;align-items:center;font-size:24px;line-height:1;transition:background .2s,color .2s,transform .2s;display:flex;position:absolute;top:16px;right:16px}.challenge-modal-close:hover{background:var(--color-surface-hover);color:var(--color-text-primary);transform:rotate(90deg)}.challenge-modal-close:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.challenge-modal-icon{background:var(--color-primary-soft);border:1px solid var(--color-border);border-radius:var(--radius-full);justify-content:center;align-items:center;width:78px;height:78px;margin:0 auto 20px;font-size:38px;animation:.55s ease-out challenge-icon-pop;display:flex}.challenge-modal.success .challenge-modal-icon{background:#34d3991f;border-color:#34d39940}.challenge-modal-eyebrow{color:var(--color-primary-hover);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.08em;margin-bottom:10px;display:inline-block}.challenge-modal.success .challenge-modal-eyebrow{color:var(--color-success)}.challenge-modal h2{color:var(--color-text-primary);font-size:28px;line-height:var(--line-height-tight);margin:0 0 12px}.challenge-modal-message{max-width:420px;color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:var(--line-height-relaxed);margin:0 auto 22px}.challenge-modal-message strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.challenge-modal-explanation{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:left;padding:18px}.challenge-modal-explanation>span{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-bottom:8px;display:block}.challenge-modal-explanation p{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}.challenge-modal-actions{gap:10px;margin-top:24px;display:grid}.challenge-next-button{width:100%;padding:14px 18px}.secondary-button{border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text-secondary);font-weight:var(--font-weight-medium);background:0 0;padding:12px 18px;transition:background .2s,border-color .2s,color .2s}.secondary-button:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-text-primary)}.secondary-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@keyframes challenge-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes challenge-modal-in{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes challenge-icon-pop{0%{opacity:0;transform:scale(.5)rotate(-12deg)}60%{transform:scale(1.08)rotate(4deg)}to{opacity:1;transform:scale(1)rotate(0)}}@media (width<=750px){.challenge-main{padding:22px}.challenge-main h2{font-size:24px}.challenge-modal-backdrop{padding:16px}.challenge-modal{max-height:calc(100vh - 32px);padding:30px 22px 24px}.challenge-modal h2{font-size:24px}.challenge-modal-icon{width:68px;height:68px;font-size:32px}}@media (prefers-reduced-motion:reduce){.challenge-modal-backdrop,.challenge-modal,.challenge-modal-icon{animation:none}.answer,.primary-button,.challenge-modal-close{transition:none}}