:root{--bg-color:#282c34;--nav-bg:#282c34;--accent:#e5c07b;--text:#fff}body,html{background:var(--bg-color);height:100%;color:var(--text);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.navbar{background:var(--nav-bg);border-bottom:1px solid #333;justify-content:space-between;align-items:center;height:50px;padding:0 20px;display:flex}#nav-buttons{gap:20px;display:flex}.logo{letter-spacing:1px;font-weight:700}.logo span{color:var(--accent)}nav button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:8px 16px;font-weight:700}nav button:active{transform:scale(.95)}button svg{color:#fff;fill:#fff;width:15px}.app-container{width:100vw;height:calc(100vh - 50px);display:flex}#editor-container,#canvas-container{flex:1;height:100%;overflow:hidden}#canvas-wrapper{background:#1a1a1a;flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}canvas{background:#000;box-shadow:0 0 20px #00000080}#turtleCursorCanvas{background:0 0;position:absolute}.side-panel{border-right:1px solid #333;flex-direction:column;flex:1;height:100%;display:flex}#editor-container{flex:3;overflow:hidden}#console-container{background:var(--bg-color);border-top:1px solid #fff;flex-direction:column;flex:1.25;font-family:Fira Code,monospace;display:flex;overflow-y:auto}#console-container #console-bar{justify-content:space-between;display:flex}.console-header,.console-clear{background:var(--bg-color);color:#888;text-transform:uppercase;cursor:pointer;padding:5px 15px;font-size:12px}#console-output{color:#ccc;white-space:pre-wrap;padding:10px;font-size:14px;overflow-y:auto}.console-timestamp{color:#555;-webkit-user-select:none;user-select:none;margin-right:8px;font-size:11px}.log-error{color:#ff6b6b;border-left:3px solid #ff6b6b;margin-bottom:2px;padding-left:5px}.log-info{color:#f0f0f0;margin-bottom:2px}.log-warn{color:#ffd93d}.console-msg{word-break:break-all}.mobile-symbol-bar{white-space:nowrap;scrollbar-width:none;touch-action:manipulation;background:#282c34ce;border-top:1px solid #333;display:flex;overflow-x:auto}.mobile-symbol-bar::-webkit-scrollbar{display:none}.sym-btn{color:#d4d4d4;border:none;border-right:1px solid var(--accent);cursor:pointer;background:0 0;outline:none;flex:1;min-width:40px;height:25px;padding:0 10px;font-family:monospace;font-size:15px;font-weight:700;transition:background .2s}.sym-btn:last-child{border-right:none}.sym-btn:active{color:#fff;background:#37373d}@media (max-width:768px){.app-container{flex-direction:column;overflow-y:auto}#editor-container,#canvas-container{flex:none;width:100%;height:47vh}#console-container{display:none}}.mobile-only{display:none}@media (max-width:768px){.mobile-only{margin-right:10px;display:inline-block}#console-container.mobile-show{z-index:1000;background:var(--bg-color);border-top:3px solid var(--accent);width:100%;height:40vh;animation:.3s ease-out slideUp;position:fixed;bottom:0;left:0;box-shadow:0 -5px 20px #00000080;display:flex!important}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.cm-editor{height:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#000;border:1px solid #333;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#333}*{scrollbar-width:thin;scrollbar-color:#000 #1a1a1a}
