:root{--bg-color: #0d1117;--card-bg: #161b22;--text-color: #e6edf3;--accent: #58a6ff;--border-color: #30363d;--btn-bg: #238636;--btn-hover: #2ea043}body.light{--bg-color: #f6f8fa;--card-bg: #ffffff;--text-color: #24292f;--accent: #0969da;--border-color: #d0d7de;--btn-bg: #1f883d;--btn-hover: #2ea043}*{box-sizing:border-box}body{background:var(--bg-color);color:var(--text-color);font-family:JetBrains Mono,monospace;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;transition:background .4s,color .4s;overflow-x:hidden}header{display:flex;justify-content:space-between;align-items:center;width:95%;max-width:1100px;padding:1rem;flex-wrap:wrap;gap:1rem}h1{margin:0;font-size:1.6rem}#xp-display{background:var(--card-bg);padding:.5rem 1rem;border-radius:8px;border:1px solid var(--border-color)}.theme-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-color);width:30px;height:30px;cursor:pointer;color:var(--text-color);font-size:1rem;padding:0;flex-shrink:0;flex-grow:0;transition:background .3s,transform .2s}.theme-btn:hover{background:var(--card-bg);transform:rotate(15deg)}.theme-icon{display:inline-block;width:15px;height:30px;font-size:18px;padding:5px;line-height:1;text-align:center;pointer-events:none}#progress-wrapper{display:flex;align-items:center;justify-content:space-between;width:95%;max-width:1100px;margin:.5rem 0;gap:.5rem}#progress-container{flex:1;height:6px;background:var(--border-color);border-radius:4px;overflow:hidden}#progress-bar{width:0%;height:100%;background:var(--accent);transition:width .3s}#progress-text{font-size:.75rem;font-weight:600;color:var(--text-color);margin-left:.5rem}#progress-wrapper a{font-size:.75rem;color:var(--accent);text-decoration:none}main{width:100%;max-width:1100px;display:flex;justify-content:center}.challenge-area{display:flex;flex-direction:row;justify-content:center;align-items:stretch;gap:1.5rem;width:100%;padding:1rem}.code-area,.answer-area{flex:1;background:var(--card-bg);border-radius:12px;border:1px solid var(--border-color);padding:1rem;display:flex;flex-direction:column;overflow:visible;box-shadow:0 4px 20px #00000026;transition:background .4s,color .4s,border .4s;min-height:320px}.question{margin-bottom:.5rem;font-weight:700;color:var(--accent);line-height:1.4}textarea{width:100%;flex:1;min-height:120px;background:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:8px;padding:10px;resize:vertical;font-size:.9rem;overflow-y:auto;transition:background .4s,color .4s,border .4s}.buttons{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:1rem;gap:.5rem}button{background:var(--btn-bg);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:700;transition:background .3s,transform .2s;flex:1;min-width:120px}button:hover{background:var(--btn-hover);transform:scale(1.03)}#feedback{margin-top:1rem;font-weight:700}#explanation{margin-top:.5rem;font-size:.9em;color:var(--accent)}@media (max-width: 900px){.challenge-area{flex-direction:column;gap:1.5rem}.code-area,.answer-area{width:100%;max-width:100%;overflow-x:auto}.code-area,.answer-area{padding-bottom:1rem}textarea{min-height:90px;font-size:.85rem}button{min-width:100px}header{flex-direction:column;align-items:flex-start}.theme-btn{width:30px;height:30px;align-self:flex-end}}@media (max-width: 480px){h1{font-size:1.3rem}#xp-display{font-size:.85rem}button{padding:8px 12px;font-size:.85rem}}