*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;font-size:16px;line-height:1.5;color:#333;background-color:#f4f4f9;display:flex;flex-direction:column;min-height:100vh}h1{font-size:1.5rem;font-weight:700;margin:0}.container{display:flex;flex-direction:column;height:100vh}header{background-color:#4c4cff;color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 8px rgba(0,0,0,.1)}header h1{font-size:1.8rem}.project-controls{display:flex;gap:10px}button,select{padding:8px 12px;font-size:14px;font-weight:500;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease,color .3s ease}button:hover{background-color:#6363ff;color:#fff}select{background-color:#fff;border:1px solid #ddd;color:#333}button:disabled{background-color:#ccc;cursor:not-allowed}.content{display:flex;flex:1;overflow:hidden}.editor{width:40%;display:flex;flex-direction:column;background-color:#fff;border-right:1px solid #ddd;padding:10px;box-shadow:4px 0 8px rgba(0,0,0,.05)}.editor-pane{display:none;flex:1;flex-direction:column}.editor-pane.active{display:flex}textarea{flex:1;width:100%;padding:12px;font-family:Source Code Pro,monospace;font-size:14px;border:1px solid #ddd;border-radius:5px;margin-top:10px;color:#333;background-color:#f8f9fa;resize:none;outline:none;transition:border-color .3s ease}textarea:focus{border-color:#4c4cff}.tabs{display:flex;border-bottom:1px solid #ddd}.tab{flex:1;text-align:center;padding:10px;cursor:pointer;background-color:#e9ecef;color:#333;font-weight:700;border-right:1px solid #ddd;transition:background-color .3s ease,color .3s ease}.tab.active{background-color:#4c4cff;color:#fff}.tab:last-child{border-right:none}.tab:hover{background-color:#3636f7}#libraries-editor h3{margin-bottom:10px;color:#4c4cff;font-size:1.2rem}#library-input{width:calc(100% - 80px);padding:8px 12px;font-size:14px;border:1px solid #ddd;border-radius:5px;margin-bottom:10px}#add-library{padding:8px 12px;background-color:#4c4cff;color:#fff;border-radius:5px;font-weight:700}#library-list{list-style:none;margin-top:10px;max-height:150px;overflow-y:auto}#library-list li{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid #ddd;font-size:14px}.remove-library{padding:2px 8px;background-color:#ff4c4c;color:#fff;border:none;border-radius:3px;cursor:pointer}.remove-library:hover{background-color:#ff1a1a}@media (max-width:768px){.content{flex-direction:column}.editor{width:100%;height:50%}.preview{height:50%;border-left:none}.tab,textarea{font-size:12px}.CodeMirror{max-height:200px;min-height:0}}@media (max-width:480px){header{flex-direction:column;gap:10px}button,select{padding:6px 10px}button,select,textarea{font-size:12px}.tab{font-size:10px;padding:8px}.CodeMirror{max-height:150px;min-height:0}}.preview{flex:1;display:flex;flex-direction:column;background-color:#fff;border-left:1px solid #ddd;padding:10px;box-sizing:border-box}.preview-controls{display:flex;align-items:center;gap:10px;padding:10px;background-color:#f8f9fa;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:10px;overflow-x:auto}.preview-controls label{font-weight:700;font-size:14px;color:#333}.preview-controls input,.preview-controls select{width:80px;padding:6px;font-size:14px;border:1px solid #ddd;border-radius:5px}.preview iframe{width:100%;height:100%;border:none;background-color:#fafafa;transition:width .3s,height .3s}.editor-pane .CodeMirror{height:100%;width:100%;font-size:14px}.CodeMirror{max-height:500px;min-height:0}#floating-console-button{position:fixed;bottom:20px;left:20px;background-color:#3a3d4a;color:#f8f8f2;padding:8px 12px;border-radius:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:1;display:flex;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;transition:background-color .2s ease}#floating-console-button:hover{background-color:#44475a}#floating-console-button svg{margin-right:6px;stroke:#8be9fd}#console-popup{position:fixed;bottom:60px;left:20px;width:450px;max-width:calc(100vw - 40px);height:250px;max-height:calc(50vh - 70px);background-color:#282a36;color:#f8f8f2;border:1px solid #1e1f29;border-radius:6px;box-shadow:0 5px 20px rgba(0,0,0,.3);z-index:2;display:flex;flex-direction:column;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px}#console-popup.hidden{display:none}#console-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background-color:#1e1f29;border-bottom:1px solid #44475a;user-select:none}#console-header span{font-weight:500;color:#bd93f9}#console-header button{background:none;border:1px solid #44475a;color:#f8f8f2;cursor:pointer;padding:3px 7px;border-radius:4px;margin-left:6px;font-size:11px}#console-header button:hover{background-color:#6272a4;border-color:#6272a4}#close-console-btn{font-size:16px;padding:1px 6px}#console-messages{flex-grow:1;overflow-y:auto;padding:8px 10px;white-space:pre-wrap;word-break:break-word}.console-message{padding:3px 0;border-bottom:1px solid #3b3d4a;line-height:1.5;display:flex;align-items:flex-start}.console-message:last-child{border-bottom:none}.console-message pre{margin:0;padding:0;white-space:pre-wrap;word-break:break-word;background-color:transparent;color:inherit;font-family:inherit;font-size:inherit}.console-log{color:#f8f8f2}.console-error{color:#f55;font-weight:500}.console-warn{color:#f1fa8c}.console-info{color:#8be9fd}.console-debug{color:#bd93f9;opacity:.8}#console-messages::-webkit-scrollbar{width:8px}#console-messages::-webkit-scrollbar-track{background:#282a36}#console-messages::-webkit-scrollbar-thumb{background:#44475a;border-radius:4px}#console-messages::-webkit-scrollbar-thumb:hover{background:#6272a4}