@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");:root{--bg-base:#080c18;--bg-card:#0f1629;--bg-card-hover:#141e35;--bg-nav:rgba(8,12,24,0.95);--border:rgba(255,255,255,0.08);--border-hover:rgba(255,255,255,0.15);--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--tier-1:#22c55e;--tier-1-bg:rgba(34,197,94,0.1);--tier-1-glow:rgba(34,197,94,0.3);--tier-2:#3b82f6;--tier-2-bg:rgba(59,130,246,0.1);--tier-2-glow:rgba(59,130,246,0.3);--tier-3:#a855f7;--tier-3-bg:rgba(168,85,247,0.1);--tier-3-glow:rgba(168,85,247,0.3);--tier-4:#f97316;--tier-4-bg:rgba(249,115,22,0.1);--tier-4-glow:rgba(249,115,22,0.3);--tier-5:#ef4444;--tier-5-bg:rgba(239,68,68,0.1);--tier-5-glow:rgba(239,68,68,0.3);--accent:#6366f1;--accent-hover:#7c3aed;--accent-bg:rgba(99,102,241,0.15);--success:#22c55e;--warning:#f59e0b;--nav-height:64px;--radius:12px;--radius-sm:8px;--radius-lg:16px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-base);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;outline:none}.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:var(--bg-nav);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:100;display:flex;align-items:center;padding:0 2rem;gap:2rem}.nav-brand{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}.nav-links{display:flex;align-items:center;gap:.25rem;flex:1 1}.nav-link{padding:.4rem .875rem;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;color:var(--text-secondary);transition:all .2s}.nav-link.active,.nav-link:hover{color:var(--text-primary);background:rgba(255,255,255,.05)}.nav-xp{display:flex;align-items:center;gap:.75rem;margin-left:auto}.xp-display{gap:.5rem;background:var(--accent-bg);border:1px solid rgba(99,102,241,.3);border-radius:999px;padding:.3rem .875rem;color:var(--accent)}.streak-display,.xp-display{display:flex;align-items:center;font-size:.875rem;font-weight:600}.streak-display{gap:.35rem;color:var(--warning)}.page-container{padding-top:calc(var(--nav-height) + 2rem);max-width:1280px;margin:0 auto;padding-left:2rem;padding-right:2rem;padding-bottom:4rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all .2s}.card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}.challenge-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;position:relative;overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;display:flex;flex-direction:column;gap:.75rem;min-height:180px}.challenge-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;transition:opacity .25s;opacity:0}.challenge-card.available:before,.challenge-card:hover:before{opacity:1}.challenge-card.tier-1:before{background:var(--tier-1)}.challenge-card.tier-2:before{background:var(--tier-2)}.challenge-card.tier-3:before{background:var(--tier-3)}.challenge-card.tier-4:before{background:var(--tier-4)}.challenge-card.tier-5:before{background:var(--tier-5)}.challenge-card:hover{transform:translateY(-3px);border-color:var(--border-hover)}.challenge-card.available:hover{box-shadow:0 12px 40px rgba(0,0,0,.4)}.challenge-card.locked{opacity:.5;cursor:not-allowed}.challenge-card.locked:hover{transform:none}.challenge-card.completed{border-color:rgba(34,197,94,.3)}.challenge-card.completed:after{content:"";position:absolute;inset:0;background:rgba(34,197,94,.03);pointer-events:none}.card-number{font-size:.75rem;font-weight:600;color:var(--text-muted);font-family:JetBrains Mono,monospace}.card-title{font-size:.95rem;font-weight:600;color:var(--text-primary);line-height:1.3}.card-concepts{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:auto}.concept-tag{font-size:.7rem;font-weight:500;padding:.2rem .5rem;border-radius:999px;border:1px solid}.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.xp-badge{font-size:.75rem;font-weight:700;font-family:JetBrains Mono,monospace}.status-badge{font-size:.7rem;font-weight:600;padding:.2rem .6rem;border-radius:999px}.status-badge.completed{background:rgba(34,197,94,.15);color:var(--success);border:1px solid rgba(34,197,94,.3)}.status-badge.available{background:var(--accent-bg);color:var(--accent);border:1px solid rgba(99,102,241,.3)}.status-badge.locked{background:rgba(255,255,255,.05);color:var(--text-muted);border:1px solid var(--border)}.tier-banner{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;border-radius:var(--radius);border:1px solid;margin-bottom:1.5rem}.tier-icon{font-size:1.5rem}.tier-info h2{font-size:1.1rem;font-weight:700}.tier-info p{font-size:.8rem;margin-top:.15rem}.challenges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:3rem}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;transition:all .2s}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:white;box-shadow:0 4px 15px rgba(99,102,241,.3)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.45)}.btn-secondary{background:rgba(255,255,255,.05);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:var(--border-hover)}.btn-success{background:linear-gradient(135deg,#16a34a,#22c55e);color:white;box-shadow:0 4px 15px rgba(34,197,94,.3)}.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(34,197,94,.45)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.progress-bar-wrap{height:8px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:999px;transition:width .8s cubic-bezier(.4,0,.2,1);background:linear-gradient(90deg,var(--accent),#a855f7);box-shadow:0 0 12px rgba(99,102,241,.5)}.hint-item{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:.5rem;transition:border-color .2s}.hint-item.unlocked{border-color:rgba(99,102,241,.3)}.hint-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:all .2s}.hint-trigger:hover{background:rgba(255,255,255,.03);color:var(--text-primary)}.hint-trigger.open{color:var(--accent)}.hint-body{padding:.875rem 1rem;background:var(--accent-bg);border-top:1px solid rgba(99,102,241,.2);font-size:.875rem;color:var(--text-secondary);line-height:1.7}.journal-item{margin-bottom:1rem}.journal-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}.journal-textarea{width:100%;min-height:80px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;color:var(--text-primary);font-family:Space Grotesk,sans-serif;font-size:.875rem;line-height:1.6;resize:vertical;transition:border-color .2s}.journal-textarea:focus{outline:none;border-color:rgba(99,102,241,.5)}.journal-textarea::placeholder{color:var(--text-muted)}.output-console{background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--success);min-height:100px;max-height:250px;overflow-y:auto;white-space:pre-wrap}.output-console .error{color:#ef4444}.output-console .stdout{color:#a0f0a0}.output-console .running{color:var(--warning);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-card);border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-lg);padding:2.5rem;max-width:480px;width:90%;text-align:center;animation:slideUp .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 25px 80px rgba(0,0,0,.5),0 0 40px rgba(99,102,241,.2)}@keyframes slideUp{0%{transform:translateY(40px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.modal-emoji{font-size:4rem;display:block;margin-bottom:1rem}.modal h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.modal .xp-gained{font-size:2rem;font-weight:800;font-family:JetBrains Mono,monospace;color:var(--accent);margin:1rem 0}.modal .badge-unlocked{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-bg);border:1px solid rgba(99,102,241,.3);border-radius:999px;padding:.4rem 1rem;font-size:.875rem;font-weight:600;color:var(--accent);margin-bottom:1.5rem}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;min-height:calc(100vh - var(--nav-height))}.hero h1{font-size:clamp(2.5rem,6vw,5rem);font-weight:800;line-height:1.1;background:linear-gradient(135deg,#f0f4ff,#a5b4fc 50%,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.25rem}.hero p{font-size:1.1rem;color:var(--text-secondary);max-width:560px;line-height:1.7;margin-bottom:2.5rem}.progress-ring-container{position:relative;width:160px;height:160px;margin:2rem auto}.progress-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress-ring-text .count{font-size:2rem;font-weight:800;font-family:JetBrains Mono,monospace;color:var(--text-primary)}.progress-ring-text .label{font-size:.7rem;color:var(--text-muted);font-weight:500}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:2rem}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center}.stat-value{font-size:2rem;font-weight:800;font-family:JetBrains Mono,monospace;background:linear-gradient(135deg,var(--accent),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:.8rem;color:var(--text-secondary);margin-top:.25rem}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:.75rem;gap:.75rem}.badge-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:all .2s}.badge-item.earned{border-color:rgba(99,102,241,.4);background:var(--accent-bg)}.badge-item.locked{opacity:.4}.badge-emoji{font-size:2rem}.badge-name{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-align:center}.section-header{margin-bottom:2rem}.section-header h1{font-size:1.75rem;font-weight:800}.section-header p{color:var(--text-secondary);margin-top:.5rem}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.font-mono{font-family:JetBrains Mono,monospace}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}