:root{--background-color:#111;--text-color:#fff;--font-family:Arial,sans-serif;--primary-color:#007bff;--secondary-color:#0056b3}body{background-color:var(--background-color);color:var(--text-color);font-family:var(--font-family);margin:0;padding:0}#container{display:flex;height:100vh}#code-editor{flex:1 1;display:flex;flex-direction:column;align-items:flex-end;text-align:center;padding:2rem;background-color:#222;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.3);animation:fade-in .5s ease-out;overflow:hidden}#code-editor label{font-size:1.2rem;margin-bottom:1rem}#code-editor textarea{width:100%;height:100%;min-height:200px;max-height:80vh;resize:vertical;padding:0;background-color:#333}#code-editor button,#code-editor textarea{font-size:1rem;border:none;color:var(--text-color)}#code-editor button{margin-top:1rem;padding:.5rem 1rem;background-color:var(--primary-color);border-radius:5px;cursor:pointer;transition:background-color .3s ease}#code-editor button:hover{background-color:var(--secondary-color)}#terminal,#terminal-container{background-color:#000;color:var(--text-color);padding:1rem;font-family:Courier New,Courier,monospace;font-size:14px;overflow-y:auto;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.3)}#terminal-container{flex:1 1;display:flex;flex-direction:column;justify-content:space-between;transition:height .3s ease}.error{color:red}::-webkit-input-placeholder{opacity:.5}:-moz-placeholder,::-moz-placeholder{opacity:.5}:-ms-input-placeholder{opacity:.5}.suggestions{position:absolute;z-index:1;background-color:#333;color:var(--text-color);border-radius:5px;padding:.5rem;width:200px;height:50%;overflow-y:scroll;text-align:start}.suggestion{margin-bottom:.5rem;cursor:pointer}.suggestion:hover{background-color:#555}.buttons{display:flex;flex-direction:row;gap:3rem;margin-top:1rem}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.modal-content{background-color:#222;margin:15% auto;padding:20px;border:1px solid #888;width:300px;border-radius:5px;color:var(--text-color)}.close{color:#ccc;float:right;font-size:28px;font-weight:700;cursor:pointer}.close:focus,.close:hover{color:var(--text-color);text-decoration:none;cursor:pointer}input[type=text]{width:100%;padding:12px 20px;margin:8px 0;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;resize:vertical}button{background-color:var(--primary-color);color:var(--text-color);padding:10px 15px;border:none;border-radius:4px;cursor:pointer;margin-top:10px}button:hover{background-color:var(--secondary-color)}button:active{background-color:#003b80}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-color:var(--background-color)}::-webkit-scrollbar-thumb{background-color:var(--text-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-color)}::-webkit-scrollbar-thumb:active{background-color:var(--text-color)}.suggestion-info{opacity:.5;text-align:end;font-size:small;text-transform:lowercase}#tip-container{margin-top:1rem;padding:1rem;background-color:#333;border-radius:5px;display:none;position:absolute;width:400px;height:auto}#tip-content{margin-bottom:1rem}#close-tip-button{position:absolute;top:.5rem;right:.5rem;font-size:1.5rem;color:var(--primary-color);background:none;border:none;cursor:pointer;padding:0}#tip-heading{font-size:1.2rem;margin-bottom:.5rem;color:var(--primary-color)}#tip-description{margin-bottom:1rem}#tip-code-example{background-color:#222;border-radius:5px;overflow-x:auto;text-align:start}#tip-code-example,.code-container{color:var(--text-color);padding:.5rem}.code-container{width:100%;height:100%;display:flex;min-height:200px;max-height:80vh;resize:vertical;font-size:1rem;background-color:#333;position:relative}.numbers{width:40px;height:100%;position:-webkit-sticky;position:sticky;top:0;background-color:#222;color:#999;padding-right:.5rem;overflow-y:scroll}.code-area{width:inherit;flex:1 1;padding-left:.5rem;overflow-y:scroll}#canvas-container{width:50%;overflow:hidden;padding:40px}#suggestions-container{display:none;position:absolute;width:300px;height:400px;overflow-y:scroll;text-align:start}#searchInput{display:none;padding:.5rem;font-size:1rem;background-color:#333;border:none;color:#fff;outline:none}#searchInput::placeholder{color:#aaa}#canvas{height:100%;width:100%;background-color:#fff}@media (max-width:768px){#container{flex-direction:column-reverse;align-items:center;height:95vh;padding:1rem}#canvas-container{height:50%;width:100%}#code-editor,#terminal-container{padding:1rem;width:100%;border-radius:0;box-shadow:none}#terminal{padding:.5rem}.buttons{gap:1rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center}.suggestions{max-height:300px;position:fixed;top:10px;right:10px;height:auto}.suggestion-list{list-style:none;padding:0;margin:0}.suggestion{padding:.5rem 1rem;cursor:pointer;transition:background-color .3s ease}.suggestion:hover{background-color:#555}}