:root{color-scheme:light;--bg-1: #0b0f1a;--bg-2: #1d2440;--card: #ffffff;--ink: #0d1220;--muted: #58627a;--accent: #f5c542;--accent-2: #3bd1c8;--danger: #e05757;--success: #2c9a6a;--shadow: 0 20px 60px rgba(9, 12, 24, .2);--radius: 18px}*{box-sizing:border-box}body{margin:0;font-family:Outfit,Trebuchet MS,Segoe UI,sans-serif;background:radial-gradient(circle at top,#182045 0%,var(--bg-1) 55%,#07090f 100%);color:var(--ink);min-height:100vh}.page{min-height:100vh;display:flex;flex-direction:column}.hero{padding:48px 20px 10px;color:#f3f5ff;text-align:center}.hero h1{margin:0;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:.02em}.hero p{margin:12px 0 0;color:#f3f5ffcc}main{flex:1;display:flex;justify-content:center;padding:20px 20px 60px}.container{width:min(100%,960px)}.quiz{background:var(--card);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:24px}.quiz-header{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e5e8f4;padding-bottom:16px}.quiz-header h2{margin:6px 0 0;font-size:clamp(1.4rem,3vw,2rem);color:var(--ink)}.eyebrow{margin:0;text-transform:uppercase;font-size:.75rem;letter-spacing:.18em;color:var(--accent-2);font-weight:700}.progress{font-weight:600;color:var(--muted)}.question-host{display:flex;flex-direction:column;gap:20px}.question{display:flex;flex-direction:column;gap:16px}.prompt{font-size:1.1rem;margin:0;color:var(--ink)}.options{list-style:none;padding:0;margin:0;display:grid;gap:12px}.option{display:flex;gap:12px;align-items:center;background:#f7f8ff;padding:12px 14px;border-radius:12px;border:1px solid transparent;transition:border .2s ease,box-shadow .2s ease}.option input{width:18px;height:18px}.option.is-correct{border-color:#2c9a6a80;box-shadow:0 0 0 2px #2c9a6a33}.option.is-wrong{border-color:#e0575799;box-shadow:0 0 0 2px #e0575733}.option.is-missed{border-color:#3a509699;box-shadow:0 0 0 2px #3a509626}.feedback{margin:0;font-weight:600;color:var(--muted)}.feedback.is-correct{color:var(--success)}.feedback.is-wrong{color:var(--danger)}.question-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{border:none;background:var(--accent);color:#2b2500;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #f5c54259}.btn.ghost{background:#eef0f9;color:#2f3a5c}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.nav{display:flex;justify-content:space-between;gap:12px}.code-group{display:flex;flex-direction:column;gap:16px}.code-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.code-header h3{margin:0;font-size:1.1rem;color:var(--ink)}.tag{background:#121a35;color:#f7f2dd;padding:6px 12px;border-radius:999px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.code-block{margin:0;background:#0e1428;color:#e6ebff;padding:18px;border-radius:14px;overflow-x:auto;font-family:IBM Plex Mono,Courier New,monospace}.matching{position:relative;display:grid;gap:14px 20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;background:#f8f9ff;padding:16px;border-radius:16px}.match-header{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--muted);padding:4px 2px 0}.match-col{display:grid;gap:10px}.match-item{border:1px solid #e0e5f4;background:#fff;padding:10px 12px;border-radius:12px;text-align:left;cursor:pointer;transition:border .2s ease,transform .2s ease}.match-item:disabled{opacity:1;cursor:default;transform:none}.match-item:hover{border-color:#a9b6e8;transform:translateY(-1px)}.match-item.is-active{border-color:var(--accent-2);box-shadow:0 0 0 2px #3bd1c840}.match-item.is-wrong{border-color:#e05757b3;box-shadow:0 0 0 2px #e0575733}.match-item.is-matched{background:var(--match-color, #dbe4ff);border-color:var(--match-color, #dbe4ff);color:#1a1f2f;font-weight:600}@media (max-width: 720px){.quiz{padding:20px}.quiz-header{flex-direction:column;align-items:flex-start}.matching{gap:12px}.match-item{font-size:.95rem}}