:root{--bg: #0e0f12;--bg-elev: #181a20;--fg: #e9ecf1;--muted: #8a91a0;--accent: #ff7849;--accent-dim: #c95a32;--border: #262934;--good: #3ddc84;--warn: #f5b400;--bad: #ef4d4d;font-family:Inter,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-size:17px;line-height:1.5}.app{min-height:100%;display:flex;flex-direction:column;align-items:stretch;padding:24px;max-width:720px;margin:0 auto}.hdr{text-align:center;margin-bottom:32px}.title{font-size:28px;letter-spacing:-.02em;color:var(--accent);font-weight:700}.subtitle{font-size:13px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:4px}.screen{width:100%}.ftr{margin-top:auto;padding-top:32px;font-size:12px;text-align:center}.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:28px;box-shadow:0 6px 24px #0000004d}.card h1,.card h2{margin-top:0}.muted{color:var(--muted);font-size:14px}.row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.timer{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted);background:var(--bg);padding:4px 10px;border-radius:6px;border:1px solid var(--border)}input,textarea{display:block;width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--fg);font-family:inherit;font-size:16px;margin-bottom:14px}textarea{resize:vertical;min-height:96px;font-family:inherit}input:focus,textarea:focus{outline:2px solid var(--accent-dim);outline-offset:1px}button{padding:12px 20px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:15px;cursor:pointer;font-family:inherit}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);color:#0e0f12;border-color:var(--accent);font-weight:600}button.primary:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent-dim)}button.secondary{background:transparent;margin-top:16px}.snippet{background:var(--bg);border:1px solid var(--border);padding:12px 14px;border-radius:8px;overflow-x:auto;font-size:13px;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;margin:12px 0}.codeblock{background:#1e1e1e;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:18px 0;box-shadow:0 2px 8px #00000040}.codeblock-header{display:flex;align-items:center;padding:8px 14px;background:#252526;border-bottom:1px solid #333}.codeblock-lang{font-size:11px;color:#8a91a0;text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-family:Inter,system-ui,sans-serif}.codeblock-pre{margin:0;padding:14px 0;overflow-x:auto;font-family:JetBrains Mono,Fira Code,SF Mono,ui-monospace,monospace;font-size:14px;line-height:1.55}.codeblock-line{display:flex;padding:0 14px}.codeblock-line:hover{background:#ffffff08}.codeblock-lineno{display:inline-block;width:28px;flex-shrink:0;text-align:right;padding-right:14px;color:#4a4f5a;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.codeblock-content{flex:1;white-space:pre}.question-card{padding-top:0;overflow:hidden}.progress-bar{height:4px;background:var(--border);margin:0 -28px 24px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#ffb38a);transition:width .32s ease}.question-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.category-chip{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--border);color:var(--fg)}.cat-kubernetes{background:#326ce52e;color:#7ea6ff}.cat-ci-cd{background:#3fb9502e;color:#6ed581}.cat-cloud-governance{background:#c084fc2e;color:#c4a4ff}.cat-data-protection{background:#f5b4002e;color:#f5c451}.cat-secrets-iam{background:#ef4d4d2e;color:#ff8181}.question-counter{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-right:auto}.question-title{font-size:24px;margin:4px 0 12px;letter-spacing:-.01em}.problem-text{font-size:17px;line-height:1.55;color:#d3d8e2}.answer-form{margin-top:18px}.answer-label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.answer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-6px}.answer-hint{font-variant-numeric:tabular-nums}.badge{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--badge-color, var(--accent));color:#0e0f12;font-weight:700;font-size:13px;margin-bottom:12px;letter-spacing:.08em;text-transform:uppercase}.feedback{font-size:16px}.pictet{border-left:3px solid var(--accent);padding:12px 16px;background:#ff784914;border-radius:0 8px 8px 0;margin:16px 0}.pictet p{margin:6px 0}.error{color:var(--bad);font-size:14px;margin-top:12px}.score-row{display:flex;gap:24px;align-items:baseline;margin:16px 0;flex-wrap:wrap}.score-row .big{font-size:36px}.leaderboard{width:100%;border-collapse:collapse;margin:12px 0 24px}.leaderboard th,.leaderboard td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}.leaderboard th{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.leaderboard-view{text-align:center}.leaderboard-view h1{font-size:32px;margin-bottom:24px}.leaderboard-view .leaderboard{font-size:20px;text-align:left}.leaderboard-view .leaderboard th,.leaderboard-view .leaderboard td{padding:14px 18px}.leaderboard-view .leaderboard th{font-size:14px}.update-row{margin-top:16px;font-size:13px;text-align:center}.ftr a{color:var(--muted);text-decoration:underline}.ftr a:hover{color:var(--fg)}
