*{padding:0;margin:0;box-sizing:border-box}body{font-family:monospace;background:#000;color:#fff}.join-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#000;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#fff;padding:1rem}.join-form{padding:2rem 2.5rem;border-radius:12px;box-shadow:0 12px 40px #ffffff08;max-width:360px;width:100%;display:flex;flex-direction:column;gap:1rem}.join-form h1{margin:0 0 .5rem;font-size:1.75rem;font-weight:600;letter-spacing:.5px}.join-form input{background:transparent;border:1px solid #444;padding:.75rem 1rem;border-radius:8px;font-size:1rem;color:#eee;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.join-form input::placeholder{color:#888}.join-form input:focus{border-color:#fff}.join-form button{background:#fff;color:#000;border:none;padding:.85rem 1rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;letter-spacing:.5px;transition:filter .2s,transform .1s}.join-form button:hover{filter:brightness(.95)}.join-form button:active{transform:translateY(1px)}@media (max-width: 480px){.join-form{padding:1.5rem 1.75rem}}.editor-container{display:flex;min-height:100vh;background:#000;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif}.sidebar{width:300px;background:#0f0f0f;padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:1.25rem;box-shadow:0 0 40px #ffffff05;box-sizing:border-box}.room-info{display:flex;flex-direction:column;gap:.5rem}.room-info h2{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:.5px}.sidebar button{background:#fff;color:#000;border:none;padding:.55rem .9rem;border-radius:8px;font-weight:600;cursor:pointer;font-size:.9rem;letter-spacing:.5px;transition:filter .2s,transform .1s}.sidebar button:hover{filter:brightness(.95)}.sidebar button:active{transform:translateY(1px)}.sidebar h3{margin:0 0 .25rem;font-size:1rem;font-weight:500}.sidebar ul{list-style:none;padding:0;margin:0;max-height:140px;overflow-y:auto;border:1px solid #222;border-radius:6px;background:#111}.sidebar ul li{padding:.5rem .75rem;border-bottom:1px solid #1f1f1f;font-size:.9rem}.sidebar ul li:last-child{border-bottom:none}.typing-indicator{margin:0;font-size:.8rem;padding:.5rem .75rem}.language-selector{background:transparent;color:#eee;border:1px solid #444;padding:.55rem .75rem;border-radius:6px;font-size:.9rem;outline:none;appearance:none;cursor:pointer;width:100%;box-sizing:border-box;margin-top:.5rem}option{background:#323232}.leave-room{margin-top:auto;background:transparent;color:#fff;border:1px solid #ff4d4f}.leave-room:hover{background:#ff4d4f;color:#000}.editor-wrapper{flex:1;position:relative;padding:10px 0;display:flex;flex-direction:column;background:#0e0e0e;overflow:hidden}.sidebar ul::-webkit-scrollbar{width:10px}.sidebar ul::-webkit-scrollbar-track{background:#111}.sidebar ul::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:5px}.sidebar ul::-webkit-scrollbar-thumb:hover{background:#3a3a3a}@media (max-width: 900px){.editor-container{flex-direction:column}.sidebar{width:100%;flex-direction:row;flex-wrap:wrap;gap:.75rem}.editor-wrapper{flex:1;min-height:400px}}.run-btn{background:linear-gradient(135deg,#4edb61,#02ac40);color:#fff;width:fit-content;border:none;margin:10px;padding:.65rem 1.2rem;font-size:.95rem;font-weight:600;border-radius:.75rem;cursor:pointer;letter-spacing:.5px;box-shadow:0 10px 25px -5px #2cd07ba6;transition:transform .15s ease,filter .15s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.run-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.run-btn:active{transform:translateY(1px);box-shadow:0 6px 18px -2px #6e52fab3}.run-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}.output-console{width:90%;min-height:150px;background:#1e1e28;color:#dcdfe4;border:1px solid #2f2f45;border-radius:.5rem;padding:.75rem 1rem;margin:5px 2rem;font-family:Fira Code,monospace;font-size:.9rem;resize:vertical;box-shadow:inset 0 0 12px #0006;line-height:1.3}.output-console::placeholder{color:#6f6f8a}.output-console:focus{outline:2px solid #6e52fa;outline-offset:1px}#note{font-size:xx-small;color:#fff;font-style:italic}.btn-input-div{display:flex;align-items:center;gap:2rem}.user-input{width:100%;min-height:80px;background:#3636e0;color:#dcdfe4;margin:10px;border:1px solid #2f2f45;border-radius:.5rem;padding:.75rem 1rem;font-family:Fira Code,monospace;font-size:.9rem;resize:vertical;box-shadow:inset 0 0 12px #0006;line-height:1.3}.user-input::placeholder{color:#7b7bff}.user-input:focus{outline:2px solid #4b28f9;outline-offset:1px}