*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;font-size:16px}.app{display:flex;flex-direction:column;min-height:100vh}.header{padding:20px;border-bottom:1px solid #ccc}.header h1{margin:0 0 10px;font-size:1.5em}.score{font-size:.9em;color:#666}.main{flex:1;padding:20px;max-width:800px;margin:0 auto}.loading{padding:20px}.menu{display:flex;flex-direction:column;gap:15px;align-items:center;text-align:center}.menu h2{margin:0 0 20px}.mode-btn{padding:12px 24px;font-size:1em;border:1px solid #999;background:#f5f5f5;cursor:pointer;min-width:200px}.mode-btn:hover{background:#e0e0e0}.timed-setup{display:flex;flex-direction:column;gap:20px}.timed-setup h2{margin:0}.time-setting{padding:10px;border:1px solid #ddd}.time-setting label{display:block;font-weight:700;margin-bottom:5px}.time-setting input{padding:6px;font-size:.9em;border:1px solid #999;width:100px}.time-setting p{margin:5px 0 0;font-size:.9em;color:#666}.level-selection{padding:10px;border:1px solid #ddd}.level-selection label{display:block;font-weight:700;margin-bottom:10px}.checkbox-group{display:flex;flex-wrap:wrap;gap:15px}.checkbox-label{display:flex;align-items:center;gap:5px;font-weight:400;cursor:pointer}.checkbox-label input[type=checkbox]{cursor:pointer}.setup-buttons{display:flex;gap:10px}.start-btn,.back-btn,.menu-btn{padding:10px 20px;font-size:.9em;border:1px solid #999;background:#f5f5f5;cursor:pointer}.start-btn:hover:not(:disabled){background:#e0e0e0}.start-btn:disabled{background:#ddd;cursor:not-allowed;color:#999}.back-btn:hover,.menu-btn:hover{background:#e0e0e0}.question-container{display:flex;flex-direction:column;gap:15px}.level-badge{display:inline-block;padding:4px 8px;background:#f0f0f0;border:1px solid #999;font-size:.9em;width:fit-content}.prompt{font-size:1.1em;margin:0;padding:10px;border:1px solid #ddd}.context{padding:10px;border:1px solid #ddd}.context h3{margin:0 0 10px;font-size:1em}.context-item{margin:5px 0;font-family:monospace;font-size:.9em;word-break:break-all;padding:3px;border:1px solid #eee}.context-item code{background:#f9f9f9;padding:1px 3px}.input-section{display:flex;flex-direction:column;gap:10px}.code-input{width:100%;height:150px;padding:8px;font-family:monospace;font-size:.9em;border:1px solid #999;resize:vertical}.code-input:focus{outline:1px solid #000}.code-input:disabled{background:#f5f5f5;color:#999}button{padding:8px 16px;font-size:.9em;border:1px solid #999;background:#f5f5f5;cursor:pointer}button:hover:not(:disabled){background:#e0e0e0}button:disabled{background:#ddd;cursor:not-allowed;color:#999}.submit-btn,.next-btn,.retry-btn{align-self:flex-start}.result{padding:10px;border:1px solid #999}.result.correct{background:#e8f5e9;border-color:#4caf50}.result.correct h3{margin:0 0 10px;font-size:1em;color:#2e7d32}.result.incorrect{background:#ffebee;border-color:#f44336}.result.incorrect h3{margin:0 0 10px;font-size:1em;color:#c62828}.result p{margin:5px 0;font-family:monospace;font-size:.9em}.error-msg{color:#c62828;word-break:break-all}.result code{background:#f9f9f9;padding:1px 3px;font-family:monospace}.level-selector{margin-top:20px;padding-top:15px;border-top:1px solid #ccc}.level-selector p{margin:0 0 10px;font-size:.9em}.level-buttons{display:flex;gap:5px;flex-wrap:wrap}.level-btn{padding:6px 12px;font-size:.85em;border:1px solid #999}.level-btn.active{background:#999;color:#fff}.results-screen{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}.results-screen h2{margin:0}.final-score{padding:20px;border:1px solid #ddd}.final-score p{margin:10px 0;font-size:1.1em}