*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0f;--surface: #131318;--border: #1e1e24;--accent: #7f77dd;--accent-hover: #9890e8;--text: #e2e2e8;--muted: #666;--muted-hover: #999;--cat-security-bg: rgba(239, 68, 68, .1);--cat-security-color: #f87171;--cat-security-border: rgba(239, 68, 68, .22);--cat-performance-bg: rgba(251, 146, 60, .1);--cat-performance-color: #fb923c;--cat-performance-border: rgba(251, 146, 60, .22);--cat-error-bg: rgba(74, 222, 128, .1);--cat-error-color: #4ade80;--cat-error-border: rgba(74, 222, 128, .22);--cat-integrity-bg: rgba(167, 139, 250, .1);--cat-integrity-color: #a78bfa;--cat-integrity-border: rgba(167, 139, 250, .22);--cat-api-bg: rgba(96, 165, 250, .1);--cat-api-color: #60a5fa;--cat-api-border: rgba(96, 165, 250, .22);--diff-easy: #2dd4bf;--diff-medium: #fbbf24;--diff-hard: #f87171;--score-good: #4ade80;--score-ok: #fbbf24;--score-bad: #f87171}[data-theme=light]{--bg: #f5f5f7;--surface: #ffffff;--border: #e2e2e8;--accent: #5b54c8;--accent-hover: #4a44a8;--text: #0d0d0f;--muted: #8a8a9a;--muted-hover: #555;--cat-security-bg: rgba(185, 28, 28, .07);--cat-security-color: #b91c1c;--cat-security-border: rgba(185, 28, 28, .2);--cat-performance-bg: rgba(194, 65, 12, .07);--cat-performance-color: #c2410c;--cat-performance-border: rgba(194, 65, 12, .2);--cat-error-bg: rgba(6, 95, 70, .07);--cat-error-color: #065f46;--cat-error-border: rgba(6, 95, 70, .2);--cat-integrity-bg: rgba(91, 33, 182, .07);--cat-integrity-color: #5b21b6;--cat-integrity-border: rgba(91, 33, 182, .2);--cat-api-bg: rgba(29, 78, 216, .07);--cat-api-color: #1d4ed8;--cat-api-border: rgba(29, 78, 216, .2);--diff-easy: #0d9488;--diff-medium: #d97706;--diff-hard: #dc2626;--score-good: #16a34a;--score-ok: #d97706;--score-bad: #dc2626}html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}.mono{font-family:JetBrains Mono,Fira Code,Courier New,monospace}.nav{display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:56px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:100;transition:background .2s,border-color .2s}.nav-logo{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--text)}.nav-logo span{color:var(--accent)}.nav-links{display:flex;align-items:center;gap:32px}.nav-link{font-size:14px;color:var(--muted);transition:color .15s}.nav-link:hover{color:var(--text)}.theme-toggle{background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:5px 7px;border-radius:6px;line-height:1;display:flex;align-items:center;transition:color .15s,background .15s}.theme-toggle:hover{color:var(--text);background:var(--surface)}.btn-primary{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s;white-space:nowrap;display:inline-flex;align-items:center}.btn-primary.large{padding:13px 28px;font-size:15px}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}.btn-ghost{padding:13px 28px;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:border-color .15s;display:inline-flex;align-items:center}.btn-ghost:hover{border-color:var(--muted-hover)}.btn-ghost-sm{padding:10px 18px;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:8px;font-size:14px;cursor:pointer;transition:border-color .15s,color .15s;display:inline-flex;align-items:center}.btn-ghost-sm:hover{border-color:var(--muted-hover);color:var(--text)}.filter-pills{display:flex;gap:8px;flex-wrap:wrap;padding:24px 0}.filter-pill{padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:14px;cursor:pointer;transition:all .15s}.filter-pill:hover{color:var(--text);border-color:var(--muted-hover)}.filter-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}.challenge-list{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}.challenge-row{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}.challenge-row:last-child{border-bottom:none}.challenge-row:hover{background:#7f77dd0d}.cat-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:500;font-family:JetBrains Mono,monospace;border:1px solid transparent;white-space:nowrap;flex-shrink:0}.cat-tag[data-cat=security]{background:var(--cat-security-bg);color:var(--cat-security-color);border-color:var(--cat-security-border)}.cat-tag[data-cat=performance]{background:var(--cat-performance-bg);color:var(--cat-performance-color);border-color:var(--cat-performance-border)}.cat-tag[data-cat="error handling"]{background:var(--cat-error-bg);color:var(--cat-error-color);border-color:var(--cat-error-border)}.cat-tag[data-cat="data integrity"]{background:var(--cat-integrity-bg);color:var(--cat-integrity-color);border-color:var(--cat-integrity-border)}.cat-tag[data-cat="api design"]{background:var(--cat-api-bg);color:var(--cat-api-color);border-color:var(--cat-api-border)}.code-block{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg)}.code-block-dots{display:flex;gap:6px}.code-block-dots span{width:10px;height:10px;border-radius:50%;display:block}.code-block pre{padding:24px;margin:0;font-size:13px;line-height:1.75;font-family:JetBrains Mono,Fira Code,monospace;color:var(--text);overflow-x:auto;white-space:pre;tab-size:2}.step-indicator{display:flex;align-items:center;gap:10px;margin-bottom:32px}.step-label{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--muted)}.step-label.active{color:var(--text);font-weight:600}.step-arrow{color:var(--border);font-size:13px;line-height:1}.textarea-input{width:100%;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;line-height:1.65;resize:vertical;outline:none;font-family:inherit;transition:border-color .15s}.textarea-input:focus{border-color:var(--accent)}.textarea-input::placeholder{color:var(--muted)}.feedback-item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:8px;border:1px solid}.feedback-hit{background:#4ade800f;border-color:#4ade802e}.feedback-miss{background:#f871710f;border-color:#f871712e}.feedback-icon{font-size:13px;margin-top:2px;flex-shrink:0;font-family:JetBrains Mono,monospace;font-weight:600}.empty-state{padding:56px;text-align:center;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:4px}.content-wide{max-width:960px;margin:0 auto;padding:72px 48px 48px}.content-wide.challenges{padding-top:0;padding-bottom:80px}.content-narrow{max-width:780px;margin:0 auto;padding:48px 32px 96px}@media(max-width:640px){.nav{padding:0 20px}.nav-links{gap:12px}.nav-link{display:none}.content-wide{padding:40px 20px 32px}.content-wide.challenges{padding-top:0;padding-bottom:48px}.content-narrow{padding:32px 16px 64px}.filter-pills{padding:16px 0}.challenge-row{padding:14px 16px;gap:10px}}