*{box-sizing:border-box}body,html{background:#000;width:100%;height:100%;margin:0;padding:0;font-family:Courier New,Courier,monospace;overflow:hidden}#app-container{width:100vw;height:100vh;display:flex}#canvas-wrap{background:#000;flex:1;justify-content:center;align-items:center;display:flex;position:relative}canvas{image-rendering:pixelated;display:block}#sidebar{color:#0f8;z-index:20;background:#0a0a0a;border-left:1px solid #0f8;flex-direction:column;gap:20px;width:320px;padding:25px;display:flex}h2{letter-spacing:2px;margin:0 0 10px;font-size:1.2rem}.control-group label{text-transform:uppercase;color:#0f8;margin-bottom:8px;font-size:11px;display:block}input[type=text],input[type=range]{color:#0f8;background:#111;border:1px solid #0f8;outline:none;width:100%;padding:8px}hr{border:0;border-top:1px solid #0f83;margin:10px 0}.socials a{color:#fff;margin-bottom:12px;font-size:14px;text-decoration:none;transition:all .2s;display:block}.socials a:hover{color:#0f8;padding-left:5px}#toggle{cursor:pointer;color:#000;text-transform:uppercase;background:#0f8;border:none;margin-top:auto;padding:15px;font-size:14px;font-weight:700}#toggle:hover{opacity:.8}.btn-sidebar{color:#0f8;cursor:pointer;text-transform:uppercase;background:0 0;border:1px solid #555;width:100%;padding:10px;font-family:Courier New,monospace;font-size:12px;font-weight:700;transition:all .2s}.btn-sidebar:hover{background:#0f81;border-color:#0f8}.btn-sidebar.active{border-color:#0f8;box-shadow:inset 0 0 10px #0f83}.control-group.disabled{opacity:.3;pointer-events:none;filter:grayscale()}#app-container{flex-direction:row;width:100vw;height:100vh;display:flex}#sidebar{width:320px;overflow-y:auto}@media (width<=768px){#app-container{flex-direction:column}#canvas-wrap{flex:1;width:100%;min-height:40vh}#sidebar{border-top:1px solid #0f8;border-left:none;width:100%;height:auto;max-height:50vh;padding:15px}h2{font-size:1rem}}